- 减少Http请求
- 静态资源使用CDN
- 合理设置缓存；eg:静态资源（较少改动）进行缓存
- 引用js脚本 使用defer
- css放在HEAD中
- 使用懒加载，数据较多可以使用分页
- 预加载 等浏览器空闲了再加载
- js css 图片进行压缩
- 相同功能提取组件，减少代码耦合
- 避免频繁操作DOM，频繁触发重绘和重排
- 合理使用组件懒加载和预加载
- 合理对组件缓存，方法及值的缓存
- 合理使用防抖和节流
- 缓存（babel-loader）缓存babel编译过的文件
module.exports = {
entry: "./src/js/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "js/bundle.[chunkhash:10].js",
},
module: {
rules: [
{
test:/.js$/,
loader:['babel-loader?cacheDirectory'], // cacheDirectory 开启缓存
include:'./src', // 范围
exclude:/node-modules/
}
],
},
};
- 提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件
SplitChunksPlugin
//分割代码块
splitChunks:{
chunks:'all',
cacheGroups:{
// 第三方模块
vendor:{
name:'vendor',
priority:1, // 权限最高 优先抽离
test:/node-modules/, //位置
minSize:5, // 大小限制 超过5kb 在打包 自定义
minChunks:1 // 最少复用过几次
},
// 公共模块
common:{
name:'common',
priority:0,
minSize:3,
minChunks:2,
}
}
},
Ï
- exclude、include缩小构建目标，合理使用loader，优化loader的管辖范围noParse忽略、IgnorePluginÏÏ
{
test:/.js$/,
use:['happypack/loader?id=babel'],
include:'./src', // 范围
exclude:/node-modules/
}
- happyPack 打开多进程打包
module:{
rules:[
{
test:/.js$/,
// loader:['babel-loader?cacheDirectory'], // cacheDirectory 开启缓存
use:['happypack/loader?id=babel'],
include:'./src', // 范围
exclude:/node-modules/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join('./src','index.html') ,
filename:'index.html',
chunks:['vendor','index','common']
}),
new HtmlWebpackPlugin({
template: path.join('./src','other.html'),
chunks:['vendor','other','common']
}),
new HappyPack({
id:'babel',
loaders:['babel-loader?cacheDirectory']
})
],
- 预编译资源模块：DLLPlugin
将 react、react-dom、redux、react-redux 基础包和业务基础包打包成一个文件
使用 DLLPlugin 进行分包，DllReferencePlugin 对 manifest.json 引用 - resolve配置减少文件搜索范围（alias、modules、extensions、mainFields）
- 预加载 等其他资源加载完毕，浏览器空闲时再去加载
- 懒加载 使用 import 函数，同上。回调函数中使用 import 函数。
- Tree Shaking
tree shaking的作用是把我的项目中没必要的代码全副抖落掉，打消被援用，删除没被调用的无用模块代码，该优化最终实现的是代码体积的缩小，也属于我的项目性能优化的一部分。
- 动态 Polyfill
// .babellrc 设置 polyfill 按需加载
{
"presets": [[
"@babel/preset-react",
{
"useBuiltIns":"usage", // 按需加载
"corejs":3 // 版本
}
]],
"plugin":[
[
"@babel/plugin-transform-runtime",{
// 使得corejs 在打包的时候对转换的API 方法进行隔离
"corejs":3,
"absoluteRuntime":false,
"helpers":true,
"regenerator":true,
"useESModules":false
}
]
]
}
- 图片压缩（image-webpack-loader）
- 公共资源提取（CommonsChunkPlugin）
- scope Hoisting
scope Hoisting的作用是分析模块之前的依赖关系 ， 把打包之后的公共模块合到同一个函数中去。它会代码体积更小，因为函数申明语句会产生大量代码；代码在运行时因为创建的函数作用域更少了，内存开销也随之变小。
Scope Hoisting 是webpack内置的功能，只要配置一个插件即可，如下在webpack.config.js 代码如下配置：
module.exports = {
plugins: [
// 开启 Scope Hoisting 功能
new webpack.optimize.ModuleConcatenationPlugin()
]
}Ï
-
分包设置Externals，使用 html-webpack-externals- plugin，将 react、react-dom 基础包通过 cdn 引入，不打入 bundle 中
1、webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。解决的是，所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。Ï
2、意思是如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals。
3、这样做的目的就是将不怎么需要更新的第三方库脱离webpack打包，不被打入bundle中，从而减少打包时间，但又不影响运用第三方库的方式，例如import方式等。怎么运用externals
//在index.html中引入CDN的资源react全家桶之类的资源
//webpack.config.js配置如下
module.exports = {
...
output: {
...
},
externals : {
react: 'react',
redux: 'redux'
}
...
}
- 删除无用CSS代码（purgecss-webpack-plugin）
- JS、CSS压缩
optimization: {
//压缩
minimizer: [
new TerserJSPlugin({}), // 需要显式的指定js minimalizer，因为optimization.minimizer会覆盖默认设置
new OptimizeCSSAssetsPlugin({})
]
},
```
