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‘)
})
]