Webpack 构建优化心得

构建优化之路

先把文档利器奉上
https://doc.webpack-china.org/concepts/

第一步：

抽取公共样式
vue-cli默认有带这些Plugin的，有些新手或者老项目可能没用

new webpack.optimize.CommonsChunkPlugin({
      filename: 'static/js/[name].js',
      minChunks: 2
})

第二步

通过多入口，压缩单个入口文件体积，提升首页加载速度

entry: {
        core: ['vue', 'vue-router','vuex'],
        app: ['main.js']
}

第三步

通过happypack，dll等方式提升build速度，通过对比，项目不复杂的话，优化的效果其实没那么明显，不是必须做这些优化

  module: {
        rules: [
        ...
        {
                test: /\.js$/,
                loader: 'happypack/loader?id=js', // 增加新的HappyPack构建loader
                include: [resolve('src'), resolve('test')]
        }
        ...
        ]
  }
  plugins: [
        ...
        new HappyPack({
            id: 'js',
            loaders: ['babel-loader?cacheDirectory=true'],
            threadPool: happyThreadPool,
        }),
        ...
  ]

第四步

服务端开启GZIP，由于本人用的nginx，百度一个教程就可以了，可以大幅提升加载速度

构建过程还可以开启BundleAnalyzerPlugin，通过图形化的组件构成图很方便的可以看出哪些地方可以还需要优化，同时避免为了优化而优化，在后期的尝试中，一些前辈的优化手段对构建的速度和体积没有明显作用了，不同规模的项目，优化效果肯定有差异。