重构之路：webpack打包体积优化（超详细）

开始

这一章讲打包体积优化，这个也算是最重要的一章了，我之前可是花了很多时间去查资料怎么优化打包体积的，不同版本的webpack之间还有一些区别，所以也算踩了很多的坑，所以这一章会比较长。

这边我大概写了一下页面具体布局，是下面这样的：

我们再去看一下打包体积，有2.75M，已经算很大了：我们使用一个打包可视化的插件来看看都有什么被打包进去了，我们执行：

yarn add webpack-bundle-analyzer -D
复制代码

在webpack.config.prod.js的plugins里添加一行，注意端口可以修改，别冲突了：

new BundleAnalyzerPlugin({ analyzerPort: 8081 })
复制代码

修改完成后，执行yarn run build命令，在浏览器弹出窗口，我的是这样的：

可以清晰的看到antd和react-dom就占了一半多，下面来优化。

1. 修改mode

我们去webpack.config.prod.js里：

//mode:'development'
mode:'production' //修改成开发环境
复制代码

然后查看打包体积，瞬间减少了一半多，修改成开发环境webpack会自动的去优化包体积，比如压缩代码之类的：

2. antd按需加载

在控制台执行：

yarn add babel-plugin-import -D
复制代码

然后去webpack.config.common.js配置：

            plugins:[
               	"@babel/plugin-transform-runtime",
                 ['import',{
                     libraryName:'antd',
                     libraryDirectory: 'es',
                     style:true
                 }]
             ]
复制代码

在less的配置里修改：

	{
         loader:'less-loader',
           options:{
              javascriptEnabled: true
           }
    }
复制代码

然后我们去使用到antd组件的地方，修改成以下这样的形式引入：

// import Col from 'antd/lib/col';
// import Row from 'antd/lib/row';
// import "antd/dist/antd.css"; //css也去掉
import {Col,Row} from 'antd'
复制代码

再执行打包命令,变成601kb：

3. mini-css-extract-plugin提取css

我们使用mini-css-extract-plugin来将css从js里分离出来。在控制台执行：

yarn add mini-css-extract-plugin -D
复制代码

在webpack.config.prod.js里配置：

//在顶部引入
const MiniCssExtractPlugin=require('mini-css-extract-plugin');

//在plugins里添加
new MiniCssExtractPlugin({//提取css
            filename:'css/main.css'
        }),
复制代码

这样我们可以将css单独分离到css文件夹里。然后再打包看看：

我们发现js包变小，css也被分离出来了，但是css居然有223kb，打开css文件，我们发现css没有被压缩掉。

我们在控制台执行，这两个插件前者是压缩css的，后者是压缩js的，本来在生产环境下会压缩js的，但是使用optimize-css-assets-webpack-plugin会导致压缩js无效，所以我们需要额外引入一个压缩js的插件：

yarn add optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D
复制代码

我们在webpack.config.common.js里配置：

//这个配置和module，plugins是同级的
optimization:{
        minimizer:[
            new UglifyJsPlugin({//压缩js
                cache:true,
                parallel:true,
                sourceMap:true
            }),
            new OptimizeCSSAssetsPlugin()//压缩css
        ]
    },
复制代码

然后我们去打包，我们发现css已经变小了：

4. DllPlugin和DllReferencePlugin

在之前的打包图我们可以看见包体积大部分是被react全家桶和babel占用了，现在我们把这些给拿出来单独放到一个js文件里，因为这些东西我们是不会去改变它的。

我们在根目录下新建一个==webpack.config.dll.js==，然后在里面配置，因为DllPLugin是webpack下的，所以我们不用下载：

const path=require('path')
const webpack =require('webpack')
const CleanWebpackPlugin  = require('clean-webpack-plugin');

//只需要使用yarn run dll一次就行
module.exports={
    mode:'production',
    entry:{
    	//这里把react方面的东西和babel放到这里
        vendor:['react','react-dom','react-router-dom']
    },
    output:{
        filename:'dll/_dll_[name].js',
        path:path.resolve(__dirname,'dist'),
        library:'_dll_[name]'
    },
    plugins:[
        new webpack.DllPlugin({
            name:'_dll_[name]',
            path:path.resolve(__dirname,'dist/dll','mainfist.json')
        }),
        new CleanWebpackPlugin(['./dist/dll']),//删除dll目录下的文件
    ]
}
复制代码

再去==webpack.config.common.js==里配置：

//在plugins下新增
new webpack.DllReferencePlugin({
     manifest: path.resolve(__dirname, 'dist/dll', 'mainfist.json')
}),
复制代码

然后去package.json.里配置：

//在scripts下面新增一条这个
"dll": "webpack --config webpack.config.dll.js"
复制代码