From f093fcc35f469eaf4ab623e63585f23ed86dc6d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=99=BD=E5=94=AF?= <997132391@qq.com> Date: Mon, 25 Jan 2021 18:43:30 +0800 Subject: [PATCH] =?UTF-8?q?build(webpack):=20=E4=BF=AE=E6=94=B9=20webpack?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=81=9A=E4=BB=A3=E7=A0=81=E5=88=86=E7=A6=BB?= =?UTF-8?q?,=E5=87=8F=E5=B0=8Fvendor=20=E5=A4=A7=E5=B0=8F,=E6=8F=90?= =?UTF-8?q?=E9=AB=98=E5=8A=A0=E8=BD=BD=E9=80=9F=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.js | 1 + package.json | 10 +- src/@types/index.ts | 3 +- .../modules/user/modules/team/actions.ts | 3 + .../modules/user/modules/team/getters.ts | 3 + .../modules/user/modules/team/mutations.ts | 5 + src/store/modules/user/modules/team/state.ts | 14 + src/store/modules/user/state.ts | 7 +- src/views/test/Test.vue | 4 + vue.config.js | 263 +++++++++++------- 10 files changed, 201 insertions(+), 112 deletions(-) create mode 100644 src/store/modules/user/modules/team/actions.ts create mode 100644 src/store/modules/user/modules/team/getters.ts create mode 100644 src/store/modules/user/modules/team/mutations.ts create mode 100644 src/store/modules/user/modules/team/state.ts diff --git a/.eslintrc.js b/.eslintrc.js index 2938eac..af4ce15 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,3 +1,4 @@ + module.exports = { root: true, parserOptions: { diff --git a/package.json b/package.json index 802998d..dea8c63 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "url": "http://me.ibwei.com" }, "scripts": { - "serve": "vue-cli-service serve", + "serve": "vue-cli-service serve --stats-json", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "changelog": "conventional-changelog -p angular -i CHANGELOG.md -w -r 0 -s", @@ -18,7 +18,8 @@ "test:unit": "vue-cli-service test:unit", "test-dev:unit": "vue-cli-service test:unit --watch", "test:api": "vue-cli-service test:unit ./tests/api/*.spec.ts", - "test-dev:api": "vue-cli-service test:unit ./tests/api/*.spec.ts --watch" + "test-dev:api": "vue-cli-service test:unit ./tests/api/*.spec.ts --watch", + "analysis": "vue-cli-service build --stats-json" }, "main": "dist/index.js", "files": [ @@ -72,14 +73,15 @@ "http-server": "^0.12.3", "less": "^2.7.0", "less-loader": "^5.0.0", + "lint-staged": "^10.5.1", "prettier": "^1.19.1", "style-resources-loader": "^1.3.2", "ts-node": "^9.0.0", "typedoc": "^0.19.0", "typescript": "~3.9.3", - "lint-staged": "^10.5.1", "vue-cli-plugin-style-resources-loader": "~0.1.4", - "vue-property-decorator": "^9.0.0" + "vue-property-decorator": "^9.0.0", + "webpack-bundle-analyzer": "^4.3.0" }, "gitHooks": { "pre-commit": "lint-staged" diff --git a/src/@types/index.ts b/src/@types/index.ts index 9f3e465..b5086ec 100644 --- a/src/@types/index.ts +++ b/src/@types/index.ts @@ -1,12 +1,13 @@ import { AppStateType } from '@/store/modules/app/state' import { ConsoleStateType } from '@/store/modules/console/state' import { UserStateType } from '@/store/modules/user/state' +import { TeamStateType } from '@/store/modules/user/modules/team/state' // vuex state 的模块的类型 type ModuleType = { app: AppStateType console: ConsoleStateType - user: UserStateType + user: UserStateType & { team: TeamStateType } } // 所有的StateType diff --git a/src/store/modules/user/modules/team/actions.ts b/src/store/modules/user/modules/team/actions.ts new file mode 100644 index 0000000..40b8bc3 --- /dev/null +++ b/src/store/modules/user/modules/team/actions.ts @@ -0,0 +1,3 @@ +export default { + // +} diff --git a/src/store/modules/user/modules/team/getters.ts b/src/store/modules/user/modules/team/getters.ts new file mode 100644 index 0000000..40b8bc3 --- /dev/null +++ b/src/store/modules/user/modules/team/getters.ts @@ -0,0 +1,3 @@ +export default { + // +} diff --git a/src/store/modules/user/modules/team/mutations.ts b/src/store/modules/user/modules/team/mutations.ts new file mode 100644 index 0000000..2675119 --- /dev/null +++ b/src/store/modules/user/modules/team/mutations.ts @@ -0,0 +1,5 @@ +export default { + __set(state: any, msg: { key: string; val: any }) { + state[msg.key] = msg.val + } +} diff --git a/src/store/modules/user/modules/team/state.ts b/src/store/modules/user/modules/team/state.ts new file mode 100644 index 0000000..ba4d354 --- /dev/null +++ b/src/store/modules/user/modules/team/state.ts @@ -0,0 +1,14 @@ +import { Module } from 'vuex' +import { StateType } from '../../../../../@types/index' +const state = { + teamName: '雪狼团队' +} +type TeamStateType = typeof state + +const ModuleTeam: Module = { + namespaced: true, + ...state +} + +export { TeamStateType, state } +export default ModuleTeam diff --git a/src/store/modules/user/state.ts b/src/store/modules/user/state.ts index 5fdd235..1e4eb24 100644 --- a/src/store/modules/user/state.ts +++ b/src/store/modules/user/state.ts @@ -1,6 +1,6 @@ import { StateType } from '@/@types' import { Module } from 'vuex' - +import ModuleTeam from './modules/team/state' interface Token { [propertys: string]: any } @@ -25,7 +25,10 @@ type UserStateType = typeof state const user: Module = { namespaced: true, - ...state + ...state, + modules: { + team: ModuleTeam + } } export { UserStateType, state } diff --git a/src/views/test/Test.vue b/src/views/test/Test.vue index 58323dd..f744b8b 100644 --- a/src/views/test/Test.vue +++ b/src/views/test/Test.vue @@ -99,6 +99,10 @@ export default defineComponent({ }, setup() { const store = useStore() + console.log('-------------') + console.log(store.state) + // vuex三级module + console.log(store.state.user) onMounted(() => { console.log(store.state.app.language) diff --git a/vue.config.js b/vue.config.js index 9be9ae5..b6c9358 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,105 +1,158 @@ -const IS_DEV = process.env.NODE_ENV !== 'production' -/** - * @todo 开发环境配置 - * 某些实用工具， plugins 和 loaders 都只能在构建生产环境时才有用 - * 在开发时使用 UglifyJsPlugin 来压缩和修改代码是没有意义的,不压缩 - */ - -const DEVELOPMENT = webpackConfig => { - /** - * @todo 启用 eval-source-map 更好的测试 - * 每个模块使用 eval() 执行，并且 source map 转换为 DataUrl 后添加到 eval() 中。 - * 初始化 source map 时比较慢，但是会在重新构建时提供比较快的速度，并且生成实际的文件。 - * 行数能够正确映射，因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。 - */ - - webpackConfig.store.set('devtool', 'eval-source-map') - webpackConfig.plugin('html').tap(([options]) => [ - Object.assign(options, { - minify: false, - chunksSortMode: 'none' - }) - ]) - return webpackConfig -} - -/** - * @todo 生产环境配置 - * 每个额外的 loader/plugin 都有启动时间。尽量少使用不同的工具 - */ - -const PRODUCTION = webpackConfig => { - /** - * @todo 不需要启用 source-map，去除 console 的情况下 source-map 根本没用，还浪费大量时间和空间 - * 详情见：https://webpack.js.org/configuration/devtool/#devtool - */ - webpackConfig.store.set('devtool', '') - webpackConfig.plugin('html').tap(([options]) => [ - Object.assign(options, { - minify: { - removeComments: true, - removeCommentsFromCDATA: true, - collapseWhitespace: true, - conservativeCollapse: false, - collapseInlineTagWhitespace: true, - collapseBooleanAttributes: true, - removeRedundantAttributes: true, - removeAttributeQuotes: false, - removeEmptyAttributes: true, - removeScriptTypeAttributes: true, - removeStyleLinkTypeAttributes: true, - useShortDoctype: true, - minifyJS: true, - minifyCSS: true - }, - cache: true, // 仅在文件被更改时发出文件 - hash: true, // true则将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中,这对于清除缓存很有用 - scriptLoading: 'defer', // 现代浏览器支持非阻塞javascript加载（'defer'）,以提高页面启动性能。 - inject: true, // true所有javascript资源都将放置在body元素的底部 - chunksSortMode: 'none' - }) - ]) - - return webpackConfig -} - -module.exports = { - publicPath: IS_DEV ? '/' : '/vue3-ts-base', - css: { - loaderOptions: { - less: { - globalVars: {}, - srouceMap: IS_DEV, - lessOptions: { - javascriptEnabled: true - } - } - } - }, - devServer: { - proxy: 'http://10.10.10.115:8002' - }, - pluginOptions: { - /** 全局加载less 的 webpack 插件 */ - 'style-resources-loader': { - preProcessor: 'less', - patterns: ['./src/styles/index.less'] - } - }, - /** - * @description 去掉 console信息 - * config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true; - * html-webpack-plugin插件配置详情见 https://github.com/jantimon/html-webpack-plugin#options - */ - configureWebpack: config => { - if (!IS_DEV) { - config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true - config.optimization.minimizer[0].options.terserOptions.sourceMap = false - } - }, - chainWebpack: config => { - IS_DEV ? DEVELOPMENT(config) : PRODUCTION(config) - }, - productionSourceMap: false, - lintOnSave: true -} +const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') + .BundleAnalyzerPlugin + +const IS_DEV = process.env.NODE_ENV !== 'production' +/** + * @todo 开发环境配置 + * 某些实用工具， plugins 和 loaders 都只能在构建生产环境时才有用 + * 在开发时使用 UglifyJsPlugin 来压缩和修改代码是没有意义的,不压缩 + */ + +const DEVELOPMENT = webpackConfig => { + /** + * @todo 启用 eval-source-map 更好的测试 + * 每个模块使用 eval() 执行，并且 source map 转换为 DataUrl 后添加到 eval() 中。 + * 初始化 source map 时比较慢，但是会在重新构建时提供比较快的速度，并且生成实际的文件。 + * 行数能够正确映射，因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。 + */ + + webpackConfig.store.set('devtool', 'eval-source-map') + webpackConfig.plugin('html').tap(([options]) => [ + Object.assign(options, { + minify: false, + chunksSortMode: 'none' + }) + ]) + + // webpackConfig.plugin('BundleAnalyzerPlugin').use(BundleAnalyzerPlugin) + + return webpackConfig +} + +/** + * @todo 生产环境配置 + * 每个额外的 loader/plugin 都有启动时间。尽量少使用不同的工具 + */ + +const PRODUCTION = webpackConfig => { + /** + * @todo 不需要启用 source-map，去除 console 的情况下 source-map 根本没用，还浪费大量时间和空间 + * 详情见：https://webpack.js.org/configuration/devtool/#devtool + */ + webpackConfig.store.set('devtool', '') + webpackConfig.plugin('html').tap(([options]) => [ + Object.assign(options, { + minify: { + removeComments: true, + removeCommentsFromCDATA: true, + collapseWhitespace: true, + conservativeCollapse: false, + collapseInlineTagWhitespace: true, + collapseBooleanAttributes: true, + removeRedundantAttributes: true, + removeAttributeQuotes: false, + removeEmptyAttributes: true, + removeScriptTypeAttributes: true, + removeStyleLinkTypeAttributes: true, + useShortDoctype: true, + minifyJS: true, + minifyCSS: true + }, + cache: true, // 仅在文件被更改时发出文件 + hash: true, // true则将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中,这对于清除缓存很有用 + scriptLoading: 'defer', // 现代浏览器支持非阻塞javascript加载（'defer'）,以提高页面启动性能。 + inject: true, // true所有javascript资源都将放置在body元素的底部 + chunksSortMode: 'none' + }) + ]) + + return webpackConfig +} + +module.exports = { + publicPath: IS_DEV ? '/' : '/vue3-ts-base', + css: { + loaderOptions: { + less: { + globalVars: {}, + srouceMap: IS_DEV, + lessOptions: { + javascriptEnabled: true + } + } + } + }, + devServer: { + proxy: 'http://10.10.10.115:8002' + }, + pluginOptions: { + /** 全局加载less 的 webpack 插件 */ + 'style-resources-loader': { + preProcessor: 'less', + patterns: ['./src/styles/index.less'] + } + }, + /** + * @description 去掉 console信息 + * config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true; + * html-webpack-plugin插件配置详情见 https://github.com/jantimon/html-webpack-plugin#options + */ + configureWebpack: config => { + config.optimization = { + splitChunks: { + chunks: 'all', + minSize: 3000, // （默认值：30000）块的最小大小。 + minChunks: 1, //（默认值：1）在拆分之前共享模块的最小块数 + maxAsyncRequests: 5, //（默认值为5）按需加载时并行请求的最大数量 + maxInitialRequests: 6, // （默认值为3）入口点的最大并行请求数 + automaticNameDelimiter: '-', + name: true, + cacheGroups: { + lodash: { + name: 'lodash', + test: /[\\/]node_modules[\\/]lodash[\\/]/, + priority: 20 + }, + vue: { + name: 'vue', + test: /[\\/]node_modules[\\/]vue[\\/]/ + }, + vuex: { + name: 'vuex', + test: /[\\/]node_modules[\\/]vuex[\\/]/ + }, + 'vuex-presistedstate': { + name: 'vuex-presistedstate', + test: /[\\/]node_modules[\\/]vuex-presistedstate[\\/]/ + }, + 'vue-router': { + name: 'vue-router', + test: /[\\/]node_modules[\\/]vue-router[\\/]/ + }, + 'ant-design-vue': { + name: 'ant-design-vue', + test: /[\\/]node_modules[\\/]ant-design-vue[\\/]/ + }, + moment: { + name: 'moment', + test: /[\\/]node_modules[\\/]moment[\\/]/, + priority: 40 + } + } + } + } + }, + chainWebpack: config => { + config.resolve.symlinks(true) + + config.plugin('webpack-report').use(BundleAnalyzerPlugin, [ + { + analyzerMode: 'static' + } + ]) + + IS_DEV ? DEVELOPMENT(config) : PRODUCTION(config) + }, + productionSourceMap: false, + lintOnSave: true +}