webpack-性能优化

2021-06-05 01:03

阅读:468

标签:提高   结合   过多   load   comm   环境   rar   reference   默认   

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.开发环境无用插件剔除

 

webpack-性能优化

标签:提高   结合   过多   load   comm   环境   rar   reference   默认   

原文地址:https://www.cnblogs.com/jingouli/p/12336173.html


评论


亲,登录后才可以留言!