优化打包流程‘

ZoranWong · Oct 9, 2020 · f63aa98 · f63aa98
1 parent e484547
commit f63aa98
Show file tree

Hide file tree

Showing 8 changed files with 2,901 additions and 232 deletions.
diff --git a/build/tool-config-loader.js b/build/tool-config-loader.js
@@ -42,7 +42,7 @@ function loadConfig (configPath, distConfigPath) {
 }
 
 ToolConfigLoader.prototype.apply = compiler => {
-    console.log(compiler);
+    // console.log(compiler);
 }
 
 module.exports = ToolConfigLoader;

diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -89,11 +89,11 @@ module.exports = {
             },
             {
                 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-                loader: 'url-loader',
-                options: {
-                    limit: 10000,
-                    name: utils.assetsPath('img/[name].[ext]')
-                }
+                loader: ['url-loader?limit=10000&name='+utils.assetsPath('img/[name].[ext]'), 'image-webpack-loader'],
+                // options: {
+                //     limit: 10000,
+                //     name: utils.assetsPath('img/[name].[ext]')
+                // }
             },
             {
                 test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
@@ -12,6 +12,7 @@ var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var CopyWebpackPlugin = require('copy-webpack-plugin')
 var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 const ToolConfigLoader = require('./tool-config-loader');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 // add hot-reload related code to entry chunks
 // Object.keys(baseWebpackConfig.entry).forEach(function (name) {
@@ -79,7 +80,11 @@ var webpackConfig = merge(baseWebpackConfig, {
         //   inject: true
         // }),
         new FriendlyErrorsPlugin(),
-        new ToolConfigLoader('dev')
+        new ToolConfigLoader('dev'),
+        new BundleAnalyzerPlugin({
+            analyzerPort: 9800,
+            openAnalyzer: false
+        })
     ]
 })
 

diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
@@ -76,34 +76,37 @@ var webpackConfig = merge(baseWebpackConfig, {
                 return (
                     module.resource &&
                     /\.js$/.test(module.resource) &&
-                    module.resource.indexOf('node_modules') >= 0
+                    (module.resource.indexOf('node_modules') >= 0
+                        || module.resource.indexOf('iview') >= 0
+                        || module.resource.indexOf('jssdk') >= 0)
                 ) || count > 2
             }
         }),
         // extract webpack runtime and module manifest to its own file in order to
         // prevent vendor hash from being updated whenever app bundle is updated
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'common/manifest',
-            chunks: ['common/vendor0', 'common/vendor1', 'common/vendor2']
-        }),
+        // new webpack.optimize.CommonsChunkPlugin({
+        //     name: 'common/manifest',
+        //     chunks: ['common/vendor0', 'common/vendor1', 'common/vendor2']
+        // }),
         new ToolConfigLoader('prod')
     ]
 })
 
 if (config.build.productionGzip) {
+    console.log('------- compression --------')
     var CompressionWebpackPlugin = require('compression-webpack-plugin')
 
     webpackConfig.plugins.push(
         new CompressionWebpackPlugin({
-            asset: '[path].gz[query]',
+            filename: '[path].gz[query]',
             algorithm: 'gzip',
             test: new RegExp(
                 '\\.(' +
                 config.build.productionGzipExtensions.join('|') +
                 ')$'
             ),
-            threshold: 10240,
-            minRatio: 0.8
+            threshold: 1024,
+            minRatio: 0.6
         })
     )
 }

diff --git a/config/index.js b/config/index.js
@@ -22,12 +22,12 @@ module.exports = {
         assetsRoot: path.resolve(__dirname, '../dist'),
         assetsSubDirectory: '',
         assetsPublicPath: '/',
-        productionSourceMap: false,
+        productionSourceMap: true,
         // Gzip off by default as many popular static hosts such as
         // Surge or Netlify already gzip all static assets for you.
         // Before setting to `true`, make sure to:
         // npm install --save-dev compression-webpack-plugin
-        productionGzip: false,
+        productionGzip: true,
         productionGzipExtensions: ['js', 'css'],
         // Run the build command with an extra argument to
         // View the bundle analyzer report after build finishes: