- tree shaking (摇树优化)
- 分割打包
- webpack 懒加载和预加载
- PWA 渐进式网络开发应用程序
- webpack 多进程打包
- webpack externals ( CND 打包优化)
- webpack dll (动态链接库)
1. tree shaking 摇树优化
- 前提
- 必须要使用 ES6 模块化
- 开启 production 环境
- 作用
- 减少代码体积
- 注意事项
- package.json 中配置 ‘sideEffects’:false 表示所有文件都没有副作用 (可以被优化,会导致 js 中引入的 css文件不会被编译)
- 更改 ‘sideEffects’:[‘*.css’]
2.代码分割
方式一 多文件打包
entry:{
index:"./src/index.js",
test:"./src/test.js"
},
output:{
filename:"js/[name][hash:10].js",
path:resolve(__dirname,"dist")
}[name] 映射的是 enty 的 key 值，而不是 路径本身的文件名
方拾二 公共文件抽离
optimization:{
splitChunks:{
chunks:"all"
}
}- 可将 node_modules 中的代码单独打包输出一个 chunk (单入口打包只做这一步)
- 自动分析多入口 chunk ,如果有公共文件,会打包成一个独立的chunk (多入口运行全部步骤)
方式三 使用JS代码动态引入
import(/*webpackChunkName:'test'*/'./test').then((result)=>{
console.log("文件加载成功"，result)
}).catch((err)=>{
console.log('文件加载失败',err)
})3. webpack 懒加载和预加载
懒加载
document.getElementById("btn").onclick = ()=>{
import(/*webpackChunkName:'test'*/'./test.js').then(({add})=>{
add(1,2) // 3
}).catch(()=>{
// 加载失败
})
}预加载
document.getElementById("btn").onclick = ()=>{
import(/*webpackChunkName:'test',*/)
}4.PWA 渐进式网络开发应用程序
高大上的名字有一个实用的叫法：设备离线缓存技术
安装依赖
yarn add workboxWebpackPlugin -Dwebpack.config.js
const WorkboxWebpackPliugin = require(workbox-webpack-plugin)
plugins:[
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim:true,
skipWaiting:true
})
]package.json 配置
"eslintConfig":{
"env":{
"browser":true // 开放Eslint识别浏览器中的全局属性
}
}入口文件.JS 配置
if("serviceWorker" in navigator){
window.addEventListener("load",()=>{
navigator.serviceWorker.register("/service-worke.js").then(()=>{
console.log("注册成功")
}).catch(()=>{
console.log("注册失败")
})
})
}5. webpack 多进程打包
注意：启动多进程打包的时间大概600ms，只有的过大的文件编译时需要开启多进程。
安装
yarn add thread-loader -D配置项
module:{
rules:[
{
test:/\.js$/,
exclude:/node_nodules/,
use:[
{
loader:"threed-loader" // 对JS文件行多进程打包处理
},
{
loader:"babel-loader",
options:{
persets:[
"@babel/perset-env",
[
useBuiltIns:"usage",
corejs:{
version:'3'
},
taegets:{
chrome:"60"
}
]
]
}
}
]
}
]
}6. externals (CDN打包优化)
使用场景: 本地使用第三方库,打包时想使用CDN的方式,减少本地代码打包体积
配置 webpackconfig.js
externals:{
jquery:"$"
}上面的 externals 中的 key 指表示引入库的名称 , value 表示暴露的变量名称, 例如: import $ from “jquery” 中 [key] 对应的 jquery 而 [value] 对应的 “$”
7. webpack dll (动态链接库)
通俗易懂的理解是 将指定的第三方库单独打包
流程:
- 创建 webpack.dll.js 文件用来配置需要单独打包的第三方库
- 运行 webpack -config webpack.dll.js 会生成打包好的库,并创建一个manifsets.json 文件, 用来将映射单独打包的库的信息
- 配置 webpack.config.js ,通过 manifsets.json 的映射信息, 忽略项目编译对指定库的编译, 并将单独的第三方包自动引入到html中
配置 webpack.dll.js
const {resolve} = require("path");
module.exports {
entry:{
jquery:["jquery"], // key 是终生成的name ； value 要打包的库是Jquery
},
output:{
filename:"[name].js",
path:resolve(__dirname,"dll"),
library:'[name]_[hash].js' // 打包出来的库对外暴露内容名字
},
plugins:[
// 打包生成一个 manifsets.json, 提供jquery的映射
new webpack.DllPlugin({
name:'[name]_[hash]', // 映射的暴露内容的名字
path:resolve(__dirname,"dll/manifsets.json") // 输出的文件路径
})
],
mode:"production"
}安装依赖
yarn add add-asset-html-webpack-plugin -D配置 webpack.config.js
plugin:[
// 检索 manifest 文件,识别不能打包的库
new webpack.DllReferencePlugin({
manifest:resolve(__dirname,"dll/manifest.json")
})
// 将某个文件打包输出,并在html中自动引入资源
new AddAssetHtmlWebpackPlugin({
filepath:resolve(__dirname,"dll/jquery.js"),
publicPath:"./" // 配置 html 引入的文件为相对路径
})
]