webpack-性能优化
2021-06-05 01:03
标签:提高 结合 过多 load comm 环境 rar reference 默认 1.跟上技术的迭代(node,webpack,yarn) 2.在尽可能少的模块上应用Loader 3.plugin尽可能精简并确保可靠 4.resolve参数合理配置: 有时候我们引入vue文件时不会跟上后缀,如 import Header from ‘./header‘; 实际上应该是 import Header from ‘./header.vue‘; 那是因为我们可以配置: 那么当我们不写后缀的时候,会先去找js,然后是vue后缀,找到即可返回 当我们这样使用:import Header from ‘./child/‘;默认会去找child目录下的index.js或者index.vue,但是如果我们是想要找child.js/child.vue,也可以通过配置: 以上配置会先去找index,如果不存在,再去找child ---- 一般不会配这玩意儿 别名: 它指向src目录 5.使用DllPlugin提高打包速度 当我们在打包的时候有些公共库的代码,如lodash.js是不会改变的,那么我们只需要在第一次打包的时候分析,后面就不要再分析了。我们可以新增一个文件(webpack.dll.js): package.json中新增命令: 这个时候进行打包会生成一个vendors.dll.js,要使用它还需要在webpack.common.js中使用一个插件: npm install add-asset-webpack-plugin --save 这个时候所有的第三方模块实现了一次打包,但是业务中还是使用了node_modules中的模块,而没有使用vendors.dll.js中的模块,下一步需要实现的就是使用dll文件中的第三方模块。 我们需要在webpack.dll.js中使用一个插件: 我们不止可以增加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.htmlresolve:{
extensions:[‘.js‘,‘.vue‘] // 不要过多配置,会降低打包速度
}
resolve:{
extensions:[‘.js‘,‘.vue‘],
mainFiles:[‘index‘,‘child‘] // 不要过多配置,会降低打包速度
}
resolve:{
@:path.resolve(__dirname,‘../src‘)
}
import header from ‘@/header‘;
const path=require(‘path‘);
module.exports={
entry:{
vendors:[‘react‘,‘react-dom‘,‘lodash‘]
},
output:{
filename:‘[name].dll.js‘,
path:path.resolve(__dirname,‘../dll‘),
library:‘[name]‘
}
}
"build:dll":"webpack --config ./build/webpack.dll.js"
const AddAssetWebpackPlugin=require(‘add-asset-webpack-plugin‘);
plugins:[
...
new AddAssetWebpackPlugin({
filepath:path.resolve(__dirname,‘../dll/vendors.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‘)
})
]