diff --git a/.eslintrc.js b/.eslintrc.js index 98d04316..343a7d43 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -8,8 +8,8 @@ module.exports = { '@vue/standard' ], rules: { - 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', - 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' + 'no-console': 'off', + 'no-debugger': 'off' }, parserOptions: { parser: 'babel-eslint' diff --git a/package-lock.json.REMOVED.git-id b/package-lock.json.REMOVED.git-id index 9f57a3ba..37f1b340 100644 --- a/package-lock.json.REMOVED.git-id +++ b/package-lock.json.REMOVED.git-id @@ -1 +1 @@ -975a87cbfa94ae0055fa5dbbf387398b44b8c8f0 \ No newline at end of file +c2732d55dc11af6a140b280f777b787cc42e6599 \ No newline at end of file diff --git a/package.json b/package.json index bcd7eecb..a66252c0 100644 --- a/package.json +++ b/package.json @@ -64,10 +64,12 @@ "compression-webpack-plugin": "^3.0.1", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.2.2", + "optimize-css-assets-webpack-plugin": "^5.0.3", "sass": "^1.21.0", "sass-loader": "^7.1.0", "svg-sprite-loader": "^4.1.6", "text-loader": "0.0.1", + "uglifyjs-webpack-plugin": "^2.2.0", "vue-cli-plugin-i18n": "^0.6.0", "vue-template-compiler": "^2.6.10", "webpack-theme-color-replacer": "^1.2.15" diff --git a/vue.config.js b/vue.config.js index e28e1592..c8425209 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,5 +1,8 @@ const CompressionWebpackPlugin = require('compression-webpack-plugin') +const UglifyJsPlugin = require('uglifyjs-webpack-plugin') +const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') + const VueFilenameInjector = require('@d2-projects/vue-filename-injector') const ThemeColorReplacer = require('webpack-theme-color-replacer') @@ -31,6 +34,92 @@ module.exports = { } }, configureWebpack: { + externals: { + 'vue': 'Vue', + 'vue-router': 'VueRouter', + 'vuex': 'Vuex' + }, + // 关闭文件过大提示,利于打包加快速度 + performance: { + hints: 'warning', + // 入口起点的最大体积 + maxEntrypointSize: 50000000, + // 生成文件的最大体积 + maxAssetSize: 30000000, + // 只给出 js 文件的性能提示 + assetFilter: function(assetFilename) { + return assetFilename.endsWith('.js'); + } + }, + // 公共代码抽离和代码分割 + optimization: { + runtimeChunk: 'single', + splitChunks: { + cacheGroups: { + vendors: { + test: /[\\/]node_modules[\\/]/, + name: 'vendors', + minSize: 30000, + minChunks: 1, + chunks: 'initial', + priority: 1 // 设置处理的优先级,数值越大越优先处理 + }, + commons: { + test: /[\\/]src[\\/]common[\\/]/, + name: 'commons', + minSize: 30000, + minChunks: 3, + chunks: 'initial', + priority: -1, + reuseExistingChunk: true // 允许使用已经存在的代码块 + }, + styles: { + name: 'styles', + test: /\.(sa|sc|c)ss$/, + chunks: 'all', + enforce: true + }, + runtimeChunk: { + name: 'manifest' + } + } + }, + minimizer: [ + // 自定义js优化配置,将会覆盖默认配置 + new UglifyJsPlugin({ + exclude: /\.min\.js$/, // 过滤掉以 '.min.js' 结尾的文件,我们认为这个后缀本身就是已经压缩好的代码,没必要进行二次压缩 + cache: true, + parallel: true, // 开启并行压缩,充分利用cpu + sourceMap: false, + extractComments: false, // 移除注释 + uglifyOptions: { + compress: { + unused: true, + drop_console: true, + drop_debugger: true, + pure_funcs: ['console.log'] + }, + output: { + comments: false + }, + warnings: false + } + }), + // 用于优化css文件 + new OptimizeCssAssetsPlugin({ + assetNameRegExp: /\.css$/g, + cssProcessorOptions: { + safe: true, + autoprefixer: { disable: true }, + mergeLonghand: false, + discardComments: { + removeAll: true // 移除注释 + } + }, + canPrint: true + }) + ] + }, plugins: [ // gzip new CompressionWebpackPlugin({