优化方向
热更新
概念
/**
- hmr: hot module replacement 热模块替换 / 模块热更新
- 作用: 一个模块发生改变,只会重新打包这一个模块(而不是打包所有模块),极大的提升了构建速度
- 样式文件: 可以使用hmr功能: style-loader内部实现了热更新功能
- js文件:默认没有这个功能(会全量刷新)---> 修改js代码,只能处理非入口文件
- html文件: 默认没有这个功能(会全量刷新)因为项目中只有一个html文件,所以我们不需要做热更新
*/
实现
因为我们在开发环境使用的是webpack-dev-server,所以不需要额外的添加代码,hot默认值为true,自动会热更新。但是对于js我们需要额外的处理。
// 在入口文件中写如下代码
if (module.hot) {
// 一旦 module.hot为true, 说明开启了热更新功能,--》让hmr功能代码生效
module.hot.accept('./print.js',function() {
// 方法会监听到print.js文件的变化,一旦发生变化,其他模块不会重新打包构建
// 会执行回调函数
print();
})
}
source-map
是一种提供源代码到构建后代码的一种映射技术(如果构建后代码出错了,通过映射关系,可以追踪到源代码的错误)。
-
配置
/**
* 是一种提供源代码到构建后代码的一种映射技术(如果构建后代码出错了,通过映射关系,可以追踪到源代码的错误)。
* [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
* source-map: 外联 错误代码的准确信息和源代码的错误位置
* inline-source-map: 内联 (只生成一个source-map) 错误代码的准确信息和源代码的错误位置
* hidden-source-map: 外联 错误代码的原因,但没有错误代码的位置,不能追踪源代码的错误,只能提示构建代码的位置 (防止代码泄露)
* eval-source-map: 内联 (每个文件都生成一个source-map,都在eval中) 错误代码的准确信息和源代码的错误位置
* nosources-source-map 外联 错误代码准确信息,但没有任何源代码信息
* cheap-source-map 外联 错误代码的准确信息和源代码的错误位置 只能精确到行,不能精确到列
* cheap-module-source-map 外联 错误代码的准确信息和源代码的错误位置 module会将loader的source-map加入
*
* 内联和外联的区别:1. 外联生成了文件,内联没有 2.内联构建速度更快
*
* 使用:
* 开发环境:
* 速度快, (eval > inline > cheap) eval-cheap-source-map:速度最快
* 调试更友好
* source-map
* cheap-module-source-map
* cheap-source-map
*
* ----> 开发环境使用:eval-source-map / eval-cheap-module-source-map
* 生产环境:源代码要不要隐藏,调试要不要更友好
* 内联会让包的体积非常大,所以生产环境一般不用内联
*
* 隐藏:
* nosources-source-map (全部隐藏)
* hidden-source-map (部分隐藏)
* 生产环境使用:source-map / cheap-module-source-map
* */
devtool: 'source-map'
oneOf
-
使用
module:{
rules:[
{
oneOf: [
// loader
]
}
]
}
正常情况中我们每个文件都会被所有的loader"处理一下",但是在oneOf中的loader,他匹配到之后就不会接着执行下面的loader了,所以oneOf,**可以提升构建速度 **,当一类文件,配置了多个的情况下,可以将其他的放到oneOf外面处理
缓存
- babel缓存
就是要在babel下,添加 cacheDirectory: true, 个人实验没啥效果(构建速度提升不明显)
{
// 1. js兼容性处理: babel-loader @babel/core @babel/preset-env
// 问题:babel只能转换基础的语法,如promise则不能进行转换
// 2. 全部兼容 @babel/polyfill
// 问题:可以解决兼容性问题,但是引入了所有的兼容性代码,体积太大
// 3. 需要做兼容性的处理就ok,按需加载---> core-js
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
// 预设: 指示babel做怎样的兼容性处理
presets: [[
'@babel/preset-env',
{
useBuiltIns: 'usage', //按需加载
corejs: {
version: 3, // 指定core-js版本
},
targets: { // 指定兼容浏览器版本
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]],
// 开启babel缓存,第二次构建,会读取之前的缓存
cacheDirectory: true,
}
},
-
全局加cache ,构建速度显著提升(从2778ms-->419ms)
module.export = {
cache: {
type: 'filesystem',
allowCollectingMemory: true,
},
} -
文件资源缓存,提升线上访问速度
// 通过修改文件名来实现缓存的效果,输出文件全部加上[contenthash:10]
/**
- 缓存
- babel缓存:cacheDirectory:true --》让代码第二次构建打包速度更快
- 文件资源缓存
- hash: 每次webpack构建时会生成一个唯一的hash值
- 问题: js和css同时使用一个hash值
- 如何重新打包,会导致所有的缓存失效
- chunkhash: 根据chunk生成的hansh值,如果打包来源于同一个chunk,那么hash值就一样 chunkid modeid
- contenthash: 文件内容不变,hash值不变 ---》让代码线上运行缓存更好使用
- */
例如:
output: {
filename: 'budle.[contenthash:10].js',
path: resolve(__dirname,'build')
},
tree sharking
去掉没有用的代码,只留下引用了的代码,减小代码体积。
/**
* tree shaking 去除无用代码
* 前提: 1. 必须使用es6模块化(使用import export 导入导出) 2. 开启production环境
* 在package.json中配置
* "sideEffects": false 所有代码都没有副作用(度可以进行tree shaking)
* 问题: 可能会把css / @babel/polyfill 文件干掉
* 解决:"sideEffects": ["*.css"]
* 在sideEffects配置不需要删除的代码
* */
code split
- 多入口
适合多页面开发
entry: {
main: './src/index.js',
test: './src/print.js'
}
output: {
filename: '[name].[contenthash:10].js', // 这里的【name】,在入口文件中配置了, main test将成为文件名
path: resolve(__dirname,'build');
}
-
chunk
// 将node_modules中代码单独打包成一个chunk最终输出
// 自动分析多入口chunk中有没有公共的文件,如果有会打包成单独一个chunk
optimization: {
splitChunks: {
chunks: 'all'
}
} -
import
注意:!!! 如果你配置了eslint,可能会报错,因为eslint不能够解析import动态引入的语法,不报错的话就不需要使用babel-eslint。
// 通过js代码,让某个文件单独被打包成一个chunk
// import动态导入
import(/* webpackChunkName: 'test' */'./print').then(({print,mul}) => {
console.log(3, 6);
}).catch(e) {
console.log("文件加载失败",e)
}
下载
npm i -D babel-eslint
在package.json文件中加入parser配置
"eslintConfig": {
"extends": "airbnb-base",
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": true
}
},
懒加载
-
将import动态引入放入异步函数中
document.querySelector('#btn').onclick = function() {
import(/webpackChunkName: 'test'/'./print')
.then(({mul}) => {
console.log(mul(4, 5));
})
.catch((err) => {
console.log(err)
})
}
预加载
document.querySelector('#btn').onclick = function() {
// 懒加载: 当文件需要使用才加载
// prefetch: 预加载,提前加载js文件 等其他资源加载完毕,浏览器空闲了,在偷偷加载资源
// 正常加载:可以认为是并行加载(同一时间加载多个js文件)
import(/* webpackChunkName: 'test',webpackPrefetch: true */'./print')
.then(({ mul }) => {
console.log(mul(3, 9));
})
.catch((e) => {
console.log('文件加载失败',e);
})
}
PWA
- 下载插件
npm i -D workbox-webpack-plugin
-
代码 webpack.config.js中
/**
- PWA: 渐进式网络开发应用程序(离线可访问)
- workbox --> workbox-webpack-plugin
*/
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
plugins: [
// 生成一个serviceworker配置文件
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true, // 帮助serviceworker快速启动
skipWaiting: true, // 删除旧的 serviceworker
})
]
-
入口文件
// 注册serviceworker
// 处理兼容性问题
// eslint不认识window navigator全局变量
// 解决: 修改package.json中的eslintConfig配置
// "env": {
// "browser": true
// }
// servicework代码必须构建在服务器上
if ('serviceWorker' in navigator) {
window.addEventListener('load',() => {
navigator.serviceWorker.register('/service-worker.js')
.then(() => {
console.log('serviceWorker注册成功')
})
.catch(() => {
console.log('serviceWorker注册失败~')
})
})
} -
package.json文件中
"eslintConfig": {
...
"env": {
"browser": true
}
},
多进程开发
- 下载
npm i thread-loader -D
-
代码
/**
- 开启多进程打包
- 进程启动大概600ms,进程通信也有开销
- 只有工作消耗时间比较长,才需要多进程打包
- 一般用来处理js文件消耗比较大的时候使用
- */
{
loader: 'thread-loader',
options: {
workers: 3,
}
},
externals
让一些额外的包,不打包到build.js中
externals: {
jquery: '$', // 外部可以通过$直接访问,不需要引入了
},
index.html中引入jquery文件
<script
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous"
></script>
dll
-
根目录下创建webpack.dll.js文件
/**
- 使用dll技术,对某些库(第三方库: jquery, react, vue...)进行单独打包
- 当运行webpack时默认查找webpack.config.js配置文件
- 需求: 我们需要运行webpack.dll.js文件 webpack --config ./webpack.dll.js
- */
const { resolve } = require('path');
const webapck = require('webpack');
module.exports = {
entry: {
// 最终打包生成的[name] ---> jquery
jquery: ['jquery']
},
output: {
filename: '[name].js',
path: resolve(__dirname, 'dll'),
library: '[name]_[hash:10]', //打包的库里面向外暴露出去的内容名字}, plugins: [ // 打包生成一个 mainfest.json ---> 提供和jquery映射关系 new webapck.DllPlugin({ name: '[name]_[hash:10]', // 映射库暴露的内容名称 path: resolve(__dirname, 'dll/mainfest.json') // 输出文件路径 }) ], mode: 'production'
}
-
执行该文件
webpack -c ./webpack.dll.js -c是 --config缩写
- 下载包
npm i -D add-asset-html-webpack-plugin
-
在webpack.config.js中加入如下代码
plugins: [
// 告诉webpack那些库不参与打包,同时使用时的名称也得改变
new webpack.DllReferencePlugin({
manifest: resolve(__dirname,'dll/mainfest.json')
}),
// 将某个文件打包输出去,并在html中自动引入该资源
new AddAssetHtmlWebpackPlugin({
filepath: resolve(__dirname, 'dll/jquery.js'),
outputPath: 'auto', // 生成的index.html文件中多了一层auto目录
}),
]