这三个能够大量缩短打包工夫
效率很好
根本能够缩短不止一倍
一. HappyPack
缩短不止一倍
文件 webpack.base.conf.js
const HappyPack = require('happypack')const os = require('os')const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length}) plugins: [ new HappyPack({ id: 'aaaaaaaaabbbbbbbccccc', loaders: [{ loader: 'babel-loader?cacheDirectory=true' }], threadPool: happyThreadPool, verbose: true }) ], module: { rule: [{ test: /\.js$/, loader: 'happypack/loader?id=aaaaaaaaabbbbbbbccccc', }] }二. autodll-webpack-plugin
git: https://github.com/asfktz/aut...
npm run build --report
能够看到每个文件打包占比图
能够将其中较大的第三方库配置到dll中
减小打包后的文件 速度也会快很多
文件 webpack.base.conf.js
plugins: [ new HtmlWebpackPlugin({ inject: true, template: 'index.html' // 模版文件 }), new AutoDllPlugin({ path: '/static/js/', //本人配 inject: true, // 与 html-webpack-plugin 联合应用，注入html中 filename: '[name].js', entry: { vendor: [ 'iview', 'vue-echarts', 'jquery', 'vue', 'codemirror', 'lodash', ] } }) ],三. webpack-parallel-uglify-plugin
文件 webpack.prod.conf.js
// goodnew ParallelUglifyPlugin({ cacheDir: '.cache/', uglifyJS:{ output: { comments: false }, compress: { warnings: false } } }), 替换 // bad new webpack.optimize.UglifyJsPlugin({ output: { comments: false, }, compress: { drop_console: true, pure_funcs: ['console.log'], //移除console warnings: false }, cache: true, parallel: true, sourceMap: true }),