提升webpack打包速度的方法(1)
1.跟上技术迭代(node、npm 、yarn)更新到最新版本。(人家会优化内部)
2.在尽可能少的模块上应用Loader
3.Plugin尽可能精简并确保可靠 (尽可能少的使用)
resolve参数合理配置
打开.babelrc文件,
如果配置有“@babel/preset-react”,就可以在组件中写react代码。
如果我们用 .jsx 引入之后我们需要配置。
rules:[
//把test中的/\.js$/,改成 /\.jsx?$/ 意思是不管后缀有没有x都会用babel-loader进行打包。
test:/\.js$/,
include:path.resolve(__dirname,"../src"),
use:[{
loader:"babel-loader"
}]
]
当引入其他的文件时。
//添加配置项,在webpack.common.js中。
resolve:{
extensions:['.js','.jsx']//意思是引入文件时,我们只用文件名,就会先找后缀是 js 的文件,然后没有的话再找后缀是 jsx 的文件。(耗费性能)
}
//如果我们只用到文件夹,而文件夹中的文件不一定是index文件,那就需要配置
resolve:{
extensions:['.js','.jsx'],
mainFiles:['index','child']//意思是当我们引入一个文件夹时,先查找文件夹中是否有index开头的文件,如果没有就查找是否有child开头的文件。(耗费性能)
}
//当我们想为一个引入的文件起一个别名的话
resolve:{
extensions:['.js','.jsx'],
mainFiles:['index','child'],
alias:{
//当看到delllee的时候,它会去找src目录下的child。
delllee:path.resolve(__dirname,"../src/child")
}
}
使用 DllPlugin 提高打包速度
引入第三方模块时,每次打包都会重新分析。第三方模块其实代码是不会边的,所以在第一次打包时候解析,
webpack.dll.js
const path=require("path")
module.export={
mode:"production",
entry:{
venfors:['react','react-dom','lodash']
},
output:{
filename:'[name].dll.js',
path:path.resolve(__dirname,'../dll'),
library:'[name]'//通过全局变量暴露出来
}
}
//往htmlplugin上添加新的插件
npm i add-asset-html-webpcak-plugin --save
在webpack.common.js中引入使用
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpcak-plugin')
//在plugins中添加
plugins:[
new AddAssetHtmlWebpackPlugin({
filename:path.resolve(__dirname,"../dll/vendors.dll.js")
})
]
package.json中添加
"scripts":{
//添加
"build:dll":"webpack --config ./build/webpack.dll.js"
}
//运行 npm run build:dll
单独对第三方文件进行打包,希望第三方模块只打包一次
如何让文件使用只打包一次的第三方模块
需要做一个映射
webpack.dll.js中引入webpack
const webpack = require("webpack");
//添加配置
plugins:[
new webpack .DllPlugin({
name:'[name]',
path:path.resolve(__dirname,"../dll/[name]/.manifest.json"),
})
]
//npm run build:dll
生成一个 vendors.manifest.json文件
为了使用打包好的vendors.manifest.json文件,需要再添加一个配置
plugins:[
new webpack.DllReferencePlugin({
manifest:path.resolve(__dirname,"../dll/vendors.manifest.json"),
})
]
//当我们打包的时候,会在文件中找映射关系,如果找到了,就没必要再引入,只需要在全局变量中去拿,第三方打包好的模块,如果没有就回去node_modules中去拿模块。
//npm run build