webpack项目体积优化之旅

需求背景：在测试服务器上，需求觉得登录时间过长

问题原因：于是看了一下项目包的体积，在4M左右，网速正常的情况下无关紧要，但还是有必要优化的~

解决问题：也是重新查阅了大量的优化体积方案，项目基于react、webpack编译打包的。

1.首先安装webpack的插件webpack-bundle-analyzer，对项目包体积进行可视化分析

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const config={
    plugins:[]
};
if (process.env.NODE_ENV === 'production') {
  const APlugin = new BundleAnalyzerPlugin();
  config.plugins.push(APlugin);
}

2.分析完模块的体积后，我们大概就对自己的项目有了一定的了解，然后接下来我们就需要优化体积。

----1.提取公共模块

（ CommonsChunkPlugin）是之前版本的公共模块提取方式，webpack v4已经移除，使用SplitChunksPlugin代替，

webpack官方文档对SplitChunksPlugin写的还是很详细的，但看着还是有点蒙，比如使用SplitChunksPlugin后还需要在entry入口设置一下公共模块吗？一开始也是有点蒙的，尝试后也就变得清晰了，我是如下配置：

entry:{
    vendor: [
        'echarts'
    ],
},
optimization: {
        splitChunks: {
            cacheGroups: {
              commons: {
                  name: "vendor",
                  chunks: "initial",
                  minChunks: 2
              }
            }
        }
  }

这样公共模块会提取模块中都有的公共部分（至少两个模块公有），也会包含你所添加的依赖（例：ecahrts）。

2.externals的使用

externals可以把你填入的依赖排除在外，打包模块的时候不进行打包你添加的依赖，然后你可以通过cdn的方式引入你的依赖（cdn地址：https://www.bootcdn.cn/）

3.UglifyjsWebpackPlugin这个就不用说了，当你的env方式是production的时候，会进行代码压缩。

4.compression-webpack-plugin进行代码gzip压缩

const CompressionPlugin = require('compression-webpack-plugin');

const config={
    ...
}


const CPlugin = new CompressionPlugin();
config.plugins.push(CPlugin);

还有一些其他的暂未使用，希望对你有所帮助

webpack项目体积优化之旅

猜你喜欢