From d38339825012c3c84dc1c63dac718245f98c47aa Mon Sep 17 00:00:00 2001 From: FairyEver <1711467488@qq.com> Date: Thu, 12 Dec 2019 20:09:31 +0800 Subject: [PATCH 1/4] runtime Former-commit-id: 856ffa599cba540197ec393598942809a3925e72 Former-commit-id: 460b39488f790611ddcff9b9632998a7e7dc6f88 Former-commit-id: 686bc89bc486bd217edc7066ee8dfc8ad24c0bd0 Former-commit-id: 4700849c0fec1e54ffb2bfa23e911b06ef0e32be [formerly 2b43f432b96bc78b7714ac46135c168d8666353b] Former-commit-id: 3e304a0514c9f0e0af71e8849d304d246b8811e2 Former-commit-id: dd95fa3d67c0220dce2844e48e19daa4d556e496 Former-commit-id: 765eec344db78fe509e57aaeaae8e8ed7b272a52 Former-commit-id: ceb73b8ba61f1645ccd5d89bbd585cc50c214011 Former-commit-id: 9c66c63cad2cbd448a4349e00495e2af8569b57d --- package-lock.json.REMOVED.git-id | 2 +- package.json | 4 +++ vue.config.js | 52 ++++++++++++++++++++++++++++++++ 3 files changed, 57 insertions(+), 1 deletion(-) diff --git a/package-lock.json.REMOVED.git-id b/package-lock.json.REMOVED.git-id index 9f57a3ba..81b6cd91 100644 --- a/package-lock.json.REMOVED.git-id +++ b/package-lock.json.REMOVED.git-id @@ -1 +1 @@ -975a87cbfa94ae0055fa5dbbf387398b44b8c8f0 \ No newline at end of file +d5b6db76fb2766c6c4500653fe9988f046835785 \ No newline at end of file diff --git a/package.json b/package.json index bcd7eecb..8df31257 100644 --- a/package.json +++ b/package.json @@ -64,10 +64,14 @@ "compression-webpack-plugin": "^3.0.1", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.2.2", + "html-webpack-plugin": "^3.2.0", + "inline-manifest-webpack-plugin": "^4.0.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..c2ffaaf6 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,5 +1,11 @@ const CompressionWebpackPlugin = require('compression-webpack-plugin') +const UglifyJsPlugin = require('uglifyjs-webpack-plugin') +const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') + +const HtmlWebpackPlugin = require('html-webpack-plugin') +const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin') + const VueFilenameInjector = require('@d2-projects/vue-filename-injector') const ThemeColorReplacer = require('webpack-theme-color-replacer') @@ -31,7 +37,53 @@ module.exports = { } }, configureWebpack: { + optimization: { + runtimeChunk: 'single', + minimizer: [ + // 自定义js优化配置，将会覆盖默认配置 + new UglifyJsPlugin({ + exclude: /\.min\.js$/, // 过滤掉以".min.js"结尾的文件，我们认为这个后缀本身就是已经压缩好的代码，没必要进行二次压缩 + cache: true, + parallel: true, // 开启并行压缩，充分利用cpu + sourceMap: false, + extractComments: false, // 移除注释 + uglifyOptions: { + compress: { + unused: true, + drop_debugger: true + }, + 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: [ + // runtime 相关的代码嵌入 indexe.html + new HtmlWebpackPlugin({ + title: 'fle-cli', + filename: 'index.html', + inject: true, + chunks: ['runtime', 'app'], + chunksSortMode: 'dependency', + minify: {/* */} + }), + new InlineManifestWebpackPlugin('runtime'), // gzip new CompressionWebpackPlugin({ filename: '[path].gz[query]', From c436074578e989a4abeb3505877cb619afefcd61 Mon Sep 17 00:00:00 2001 From: FairyEver <1711467488@qq.com> Date: Thu, 12 Dec 2019 20:20:02 +0800 Subject: [PATCH 2/4] performance optimization Former-commit-id: 2b6ff62544b71078714b4f0a1f465941829910ea Former-commit-id: 5dc98ee77f03ce3a617ad6efdbee45568db0d941 Former-commit-id: 279188c012ccccd7545f1c7ef9ad583ebc94f877 Former-commit-id: 983a49cae179740f17e70de6edef8509ec441ca3 [formerly fba357218d2f2e29d45b0fd398d57369d258757f] Former-commit-id: 604878fbd93447f6e7a229cdf6b3524144d43ce8 Former-commit-id: ea4788ebb0f14bb63a6b8aaa48b6918efd89a9d0 Former-commit-id: 8a6dc6b6daccdb9a2699a68e927f80d06d21aff5 Former-commit-id: 6e2317d25d5b1794cb8404c181b6a38ee598892a Former-commit-id: ac9cd70286571f2026120ace77ce36a0e0667f9a --- .eslintrc.js | 4 ++-- vue.config.js | 49 +++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 49 insertions(+), 4 deletions(-) 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/vue.config.js b/vue.config.js index c2ffaaf6..8b00ac09 100644 --- a/vue.config.js +++ b/vue.config.js @@ -37,12 +37,55 @@ module.exports = { } }, configureWebpack: { + // 关闭文件过大提示，利于打包加快速度 + 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"结尾的文件，我们认为这个后缀本身就是已经压缩好的代码，没必要进行二次压缩 + exclude: /\.min\.js$/, // 过滤掉以 '.min.js' 结尾的文件，我们认为这个后缀本身就是已经压缩好的代码，没必要进行二次压缩 cache: true, parallel: true, // 开启并行压缩，充分利用cpu sourceMap: false, @@ -50,7 +93,9 @@ module.exports = { uglifyOptions: { compress: { unused: true, - drop_debugger: true + drop_console: true, + drop_debugger: true, + pure_funcs: ['console.log'] }, output: { comments: false From cee7eb3ba34fafd764ea263f6117c18575299c4f Mon Sep 17 00:00:00 2001 From: FairyEver <1711467488@qq.com> Date: Thu, 12 Dec 2019 20:26:16 +0800 Subject: [PATCH 3/4] externals Former-commit-id: 3a6a80ec310b17270327af0b1f8761004eec0aeb Former-commit-id: e79782614073570395049c1d3976ae3b46bd707a Former-commit-id: 29376dc1cbab5ba5709cf8f88359d4231d05230c Former-commit-id: 624b14e375f97c3d606187337d28e80cee5fddcc [formerly 77e8e42110dda1407fdc664b9d65801757d3ec37] Former-commit-id: d7c3f4e220925065b5b0df9fb5c1049e8e0994f6 Former-commit-id: 94fcfab546966cb58241892203bcd33d586915cf Former-commit-id: 8daa6f3ac5b05f2e4f3c450d8833a4caa69c1750 Former-commit-id: 1b7e614b30e669e3f1e11101dcb4b859a98cca5e Former-commit-id: 5502b36e59b7728921d4ee33a2a5ec012f1a3de8 --- vue.config.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/vue.config.js b/vue.config.js index 8b00ac09..5528d7b2 100644 --- a/vue.config.js +++ b/vue.config.js @@ -37,6 +37,11 @@ module.exports = { } }, configureWebpack: { + externals: { + 'vue': 'Vue', + 'vue-router': 'VueRouter', + 'vuex': 'Vuex' + }, // 关闭文件过大提示，利于打包加快速度 performance: { hints: 'warning', From 22c72a7af7d94b84eae2059074d42b1c348b6711 Mon Sep 17 00:00:00 2001 From: FairyEver <1711467488@qq.com> Date: Thu, 12 Dec 2019 20:39:38 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E6=89=93=E5=8C=85=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: 2db195d8e27b076b7c457b7a031d6fbf5cf9eabf Former-commit-id: c512152169f92f0d9dda2d135e6a167f7c5d7ef5 Former-commit-id: 0f566d540a12cc1294184d3d64d954ab9986066a Former-commit-id: fc3066fdfb55373a87c91be958577e676abb7982 [formerly 8d0c30c6ce2eec173b16ed0e1100c2c432cac6e1] Former-commit-id: 75f81d72618f29f1416a7291c3d01ce4ebc393ec Former-commit-id: 328700337d2bb3758c55920ab61fa3c49c5afe1b Former-commit-id: 72d638cec7562bf92623589d7749c50050e34480 Former-commit-id: 8a1e2422f5a627be7a3b58ade522d70bde59c4e8 Former-commit-id: 15998720b5e77a4d0a15460f99ed13d6fa61927a --- package-lock.json.REMOVED.git-id | 2 +- package.json | 2 -- vue.config.js | 13 ------------- 3 files changed, 1 insertion(+), 16 deletions(-) diff --git a/package-lock.json.REMOVED.git-id b/package-lock.json.REMOVED.git-id index 81b6cd91..37f1b340 100644 --- a/package-lock.json.REMOVED.git-id +++ b/package-lock.json.REMOVED.git-id @@ -1 +1 @@ -d5b6db76fb2766c6c4500653fe9988f046835785 \ No newline at end of file +c2732d55dc11af6a140b280f777b787cc42e6599 \ No newline at end of file diff --git a/package.json b/package.json index 8df31257..a66252c0 100644 --- a/package.json +++ b/package.json @@ -64,8 +64,6 @@ "compression-webpack-plugin": "^3.0.1", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.2.2", - "html-webpack-plugin": "^3.2.0", - "inline-manifest-webpack-plugin": "^4.0.2", "optimize-css-assets-webpack-plugin": "^5.0.3", "sass": "^1.21.0", "sass-loader": "^7.1.0", diff --git a/vue.config.js b/vue.config.js index 5528d7b2..c8425209 100644 --- a/vue.config.js +++ b/vue.config.js @@ -3,9 +3,6 @@ const CompressionWebpackPlugin = require('compression-webpack-plugin') const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') -const HtmlWebpackPlugin = require('html-webpack-plugin') -const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin') - const VueFilenameInjector = require('@d2-projects/vue-filename-injector') const ThemeColorReplacer = require('webpack-theme-color-replacer') @@ -124,16 +121,6 @@ module.exports = { ] }, plugins: [ - // runtime 相关的代码嵌入 indexe.html - new HtmlWebpackPlugin({ - title: 'fle-cli', - filename: 'index.html', - inject: true, - chunks: ['runtime', 'app'], - chunksSortMode: 'dependency', - minify: {/* */} - }), - new InlineManifestWebpackPlugin('runtime'), // gzip new CompressionWebpackPlugin({ filename: '[path].gz[query]',