pref: webpack优化测试

.gitlab-ci.yml

@@ -48,7 +48,7 @@ dev_build:
       else
           echo "No need to update snapshot template"
       fi
-
+    - npm run build:dll
     - npm run build
     - cd /builds/nezha/nezha-fronted/nezha-fronted/dist
     - mc cp nz/depends/template/snapshot_template.html ./snapshot_template.html

nezha-fronted/build/webpack.base.conf.js

@@ -3,6 +3,7 @@ const path = require('path')
 const utils = require('./utils')
 const config = require('../config')
 const vueLoaderConfig = require('./vue-loader.conf')
+const HappyPack = require('happypack');
 const arg = process.env.BUILD_MODE
 const devStart = process.env.npm_lifecycle_event
 function resolve (dir) {
@@ -37,7 +38,6 @@ const baseConfig = {
       },
       {
         test: /\.(js)$/,
-        loader: 'babel-loader',
         include: [
           resolve('src'),
           resolve('test'),
@@ -47,18 +47,7 @@ const baseConfig = {
           resolve('node_modules/vue-grid-layout')
         ],
         exclude: '/node_modules/',
-        options: {
-          presets: [
-            ['env', {
-              modules: false,
-              targets: {
-                browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
-              }
-            }],
-            'stage-2'
-          ],
-          plugins: ['transform-vue-jsx', 'transform-runtime']
-        }
+        use: 'HappyPack/loader?id=babel'
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
@@ -86,6 +75,30 @@ const baseConfig = {
       }
     ]
   },
+   plugins:[
+     new HappyPack(
+       {
+         id:'babel',
+         use:[
+         {
+           loader: 'babel-loader',
+           options: {
+             cacheDirectory: true, //缓存
+             presets: [
+               ['env', {
+                 modules: false,
+                 targets: {
+                   browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
+                 }
+               }],
+               'stage-2'
+             ],
+             plugins: ['transform-vue-jsx', 'transform-runtime']
+             }
+           }]
+       }
+     )
+   ],
   node: {
     // prevent webpack from injecting useless setImmediate polyfill because Vue
     // source contains it (although only uses it if it's native).

nezha-fronted/build/webpack.dll.conf.js

@@ -0,0 +1,25 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  entry: {
+    vendor: ['vue/dist/vue.common.js','vue-router', 'echarts','axios','element-ui']
+    //vendor: ['vue/dist/vue.common.js','vue-router', 'echarts','axios','element-ui','d3','babel-core','optimize-css-assets-webpack-plugin','url-loader','sass-loader','vue-loader','uglifyjs-webpack-plugin']
+  },
+  output: {
+    path: path.join(__dirname, '../static'),
+    filename: '[name].dll.js',
+    library: '[name]_library'       // vendor.dll.js中暴露出的全局变量名
+  },
+  plugins: [
+    new webpack.DllPlugin({
+      path: path.join(__dirname, '../static', '[name]-manifest.json'),
+      name: '[name]_library'
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    })
+  ]
+};

nezha-fronted/build/webpack.prod.conf.js

@@ -9,7 +9,7 @@ const baseWebpackConfig = require('./webpack.base.conf')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+//const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 // const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
 const fileManagerPlugin = require('filemanager-webpack-plugin')
 const WebpackZipPlugin = require('webpack-zip-plugin')
@@ -19,6 +19,10 @@ const GenerateAssetPlugin = require('generate-asset-webpack-plugin')
 const WebpackShellPlugin = require('webpack-shell-plugin')
 const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
 const serverConfig = require('../static/config.json')// 引入根目录下的配置文件
+const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
+const HappyPack = require('happypack');
+const smp = new SpeedMeasurePlugin();
+
 
 // const gitRevisionPlugin = new GitRevisionPlugin();
 const createJson = function () {
@@ -51,6 +55,9 @@ if (arg === 'html') {
       chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
     },
     plugins: [
+      new webpack.DllReferencePlugin({
+        manifest: require("../static/vendor-manifest.json"), // dll 中生成的json 文件
+      }),
       new webpack.ProvidePlugin({
         introJs: ['intro.js'],
       }),
@@ -88,11 +95,11 @@ if (arg === 'html') {
       }),
       // Compress extracted CSS. We are using this plugin so that possible
       // duplicated CSS from different components can be deduped.
-      new OptimizeCSSPlugin({
+      /*new OptimizeCSSPlugin({
         cssProcessorOptions: config.build.productionSourceMap
           ? { safe: true, map: { inline: false } }
           : { safe: true }
-      }),
+      }),*/
       // generate dist index.html with correct asset hash for caching.
       // you can customize output by editing /index.html
       // see https://github.com/ampedandwired/html-webpack-plugin
@@ -232,11 +239,11 @@ if (arg === 'html') {
       }),
       // Compress extracted CSS. We are using this plugin so that possible
       // duplicated CSS from different components can be deduped.
-      new OptimizeCSSPlugin({
+      /*new OptimizeCSSPlugin({
         cssProcessorOptions: config.build.productionSourceMap
           ? { safe: true, map: { inline: false } }
           : { safe: true }
-      }),
+      }),*/
       // generate dist index.html with correct asset hash for caching.
       // you can customize output by editing /index.html
       // see https://github.com/ampedandwired/html-webpack-plugin
@@ -304,7 +311,10 @@ if (arg === 'html') {
           to: config.build.assetsSubDirectory,
           ignore: ['*']
         }
-      ])
+      ]),
+      new webpack.DllReferencePlugin({
+        manifest: require("../static/vendor-manifest.json"), // dll 中生成的json 文件
+      })
     ]
   })
 }
@@ -328,6 +338,9 @@ if (process.env.NODE_ENV == 'development') {
           ],
           copy: [
             { source: path.join(__dirname, '../dist', '/config.json'), destination: path.join(__dirname, '../dist', '/static/config.json') }
+          ],
+          copy: [
+            { source: path.join(__dirname, '../static', '/vendor.dll.js'), destination: path.join(__dirname, '../dist', '/static/vendor.dll.js') } //dll 生成的js 文件
           ]
         },
         {
@@ -362,6 +375,9 @@ if (process.env.NODE_ENV == 'development') {
         ],
         copy: [
           { source: path.join(__dirname, '../dist', '/config.json'), destination: path.join(__dirname, '../dist', '/static/config.json') }
+        ],
+        copy: [
+          { source: path.join(__dirname, '../static', '/vendor.dll.js'), destination: path.join(__dirname, '../dist', '/static/vendor.dll.js') }
         ]
       },
       {
@@ -411,4 +427,6 @@ if (config.build.bundleAnalyzerReport) {
   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
 }
 
+webpackConfig = smp.wrap(webpackConfig);
+
 module.exports = webpackConfig

nezha-fronted/package.json

@@ -8,8 +8,9 @@
     "dev": "node --max-old-space-size=10240 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js",
     "dev:html": "node --max-old-space-size=10240 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
-    "build": "node build/build.js app",
-    "build:html": "node build/build.js html",
+    "build": "node --max-old-space-size=10240 build/build.js app",
+    "build:html": "node --max-old-space-size=10240 build/build.js html",
+    "build:dll": "webpack --config build/webpack.dll.conf.js",
     "lint": "eslint --fix --ext .js,.vue src",
     "unit": "jest --config test/unit/jest.conf.js --coverage"
   },
@@ -45,6 +46,7 @@
     "echarts": "^5.2.2",
     "element-ui": "^2.15.3",
     "file-saver": "^2.0.2",
+    "happypack": "^5.0.1",
     "html-webpack-inline-source-plugin": "0.0.10",
     "html2canvas": "^1.4.1",
     "intro.js": "^5.1.0",
@@ -61,6 +63,7 @@
     "qrcodejs2": "0.0.2",
     "quill": "^1.3.7",
     "spark-md5": "^3.0.2",
+    "speed-measure-webpack-plugin": "^1.5.0",
     "v-selectpage": "^2.1.4",
     "vue": "^2.5.2",
     "vue-clipboard2": "^0.3.3",

nezha-fronted/src/entrance/app/index.html

@@ -38,6 +38,7 @@
 
 <body class="theme-light">
   <div id="app"></div>
+  <script src="/static/vendor.dll.js"></script>
 </body>
 
 </html>