webpack-性能优化

Posted 2021-03-08 金钩梨

1.跟上技术的迭代（node,webpack,yarn） 

2.在尽可能少的模块上应用Loader

3.plugin尽可能精简并确保可靠

4.resolve参数合理配置：

　　有时候我们引入vue文件时不会跟上后缀，如 import Header from ‘./header‘; 实际上应该是 import Header from ‘./header.vue‘; 那是因为我们可以配置：

resolve:{
    extensions:[‘.js‘,‘.vue‘]   // 不要过多配置，会降低打包速度
}

　　那么当我们不写后缀的时候，会先去找js，然后是vue后缀，找到即可返回 当我们这样使用：import Header from ‘./child/‘;默认会去找child目录下的index.js或者index.vue，但是如果我们是想要找child.js/child.vue，也可以通过配置：

resolve:{
    extensions:[‘.js‘,‘.vue‘],
    mainFiles:[‘index‘,‘child‘]     // 不要过多配置，会降低打包速度
}

　　以上配置会先去找index,如果不存在，再去找child ---- 一般不会配这玩意儿

　　别名：

resolve:{
    @:path.resolve(__dirname,‘../src‘)
}
import header from ‘@/header‘;

　　它指向src目录

5.使用DllPlugin提高打包速度

　　当我们在打包的时候有些公共库的代码，如lodash.js是不会改变的，那么我们只需要在第一次打包的时候分析，后面就不要再分析了。我们可以新增一个文件（webpack.dll.js）：

const path=require(‘path‘);
    module.exports={
        entry:{
            vendors:[‘react‘,‘react-dom‘,‘lodash‘]
        },
        output:{
            filename:‘[name].dll.js‘,
            path:path.resolve(__dirname,‘../dll‘),
            library:‘[name]‘
        }
    }

　　package.json中新增命令：

"build:dll":"webpack --config ./build/webpack.dll.js"

　　这个时候进行打包会生成一个vendors.dll.js，要使用它还需要在webpack.common.js中使用一个插件：

　　npm install add-asset-webpack-plugin --save

const AddAssetWebpackPlugin=require(‘add-asset-webpack-plugin‘);
    plugins:[
        ...
        new AddAssetWebpackPlugin({
            filepath:path.resolve(__dirname,‘../dll/vendors.dll.js‘)
        })
    ]

　　这个时候所有的第三方模块实现了一次打包，但是业务中还是使用了node_modules中的模块，而没有使用vendors.dll.js中的模块，下一步需要实现的就是使用dll文件中的第三方模块。

　　我们需要在webpack.dll.js中使用一个插件：

const webpack=require(‘webpack‘);
    plugins:[
        new webpack.DllPlugin({
            name:‘[name]‘,
            path:path.resolve(__dirname,‘../dll/[name].manifest.json‘)  // 会生成一个映射文件
        })
    ]
    还要在webpack.common.js中使用一个插件：
    plugins:[
        ...
        new DllReferencePlugin({
            manifest:path.resolve(__dirname,‘../dll.vendors.manifest.json‘)
        })
    ]

　　我们不止可以增加vendors，还可以增加多个，也可以动态添加，自行百度

6.控制包文件大小

7.thread-loader、parallel-webpack、happypack多进程打包

8.合理使用sourceMap

9.结合stats分析打包结果

10.开发环境内存编译

11.开发环境无用插件剔除