HMR优化代码调试source-map
生产环境性能优化
优化打包构建速度
oneOf babel 缓存 多进程打包 externals dll 优化代码运行的性能 缓存(hash,chunkhash,contenthash) tree shaking code split 懒加载和预加载 pwa
优化 开发环境 打包构建速度
HMR hot module replacement 热模块替换/模块热替换
作用:一个模块发生变化,只会重新打包这一个模块 而不是重新打包所有,极大提升构建速度
样式文件: 可以使用HMR功能,因为style-loader内部实现了 js文件: 默认不能使用HMR功能 -->解决:需要修改js代码,添加支持HMR功能的代码。注意,HMR功能对js的处理,只能处理非入口js文件的其他文件。
- if(module.hot){
- //一旦module.hot是true,说明开启HMR功能,让HMR功能代码生效
- module.hot.accept('./xxx.js',function(){
- //此方法会监听print.js文件的变化,一旦发生变化,其他默认不会重新打包构建
- //会执行后面的回调函数
- xxx();
- })
- }
html文件: 默认不能使用HMR功能,同时会导致问题:html文件不能热更新了 解决:改 entry:['入口js','html'] ,但html文件只有一个,所以不用做HMR功能
- devServer:{
- //项目构建后的目录
- contentBase: resolve(__dirname,'build'),
- //启用gzip压缩
- compress:true,
- //端口号
- port:3000,
- //自动打开浏览器
- open:true
- }
优化 开发环境 代码调试
source-map 一种提供源代码到构建后代码映射的技术
如果构建后代码出错了,通过映射可以追踪到错误的代码
- webpack.config.js
-
- devtools:'source-map'
- //其他 参数 [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
-
- source-map : 外部
- 错误代码的准确信息和错误位置
- inline-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>...
- 调试更友好 souce-map>cheap-module-souce-map>cheap-souce-map
- 所以 一般用eval-source-map
生产环境:源代码要不要隐藏,调试要不要友好?内联会让体积编码,所以一般不用内联
- nosources-source-map 隐藏源代码
- hidden-source-map 只隐藏源代码,会提示构建购代码错误信息
- --> source-map /cheap-module-souce-map
优化生产环境
oneOf
rules里中有许多个loader,这样会导致每个文件都会被所有的loader过一遍,有些能处理,有些处理不了。所以可以利用oneOf达到以下loader只会匹配到第一个。但需要注意,不能有两个loader同时处理同一个文件
- webpack.config
- module.exports={
- //....
- module:{
- rule:[
- //正常来讲,一个文件只能被一个loader处理
- //当一个文件要被多个loader处理,那么一定要指定loader的执行顺序
- // 先执行eslint 再执行babel
- {
- test:/\.js$/,
- exclude:/node_modules/,
- //优先执行
- enforce:'pre',
- loader:'eslint-loader',
- options:{
- fix:true
- }
- },
- {
- oneOf:[
- {
- test: /\.css$/,
- use:[
- ...commonCssLoader
- ]
- },
- {
- test:/\.less$/,
- use:[
- ...commonCssLoader,'less-loader'
- ]
- },
- {
- test:/\.js$/,
- exclude:/node_modules/,
- loader:'babel-loader',
- options:{
- // 预设 :指示babel做怎样的兼容性处理
- presets:[
- [
- '@babel/preset-env',
- {
- //按需加载
- useBuiltIns:'usage',
- //指定core-js版本
- corejs:{
- version:3
- },
- //指定兼容性做到哪个版本的浏览器
- targerts:{
- chrome: '40',
- fixfox: '50',
- ie: '9',
- safari: '10',
- edge: '17'
- }
- }
- ]
- ]
- }
- },
- {
- test:/\.(png|jpg|gif)/,
- loader:'url-loader',
- enModule:true,
- options:{
- limit:8*1024,
- name: '[hash:10].[ext]',
- outputpath:''
- }
- },
- {
- test:/\.html$/,
- loader:'html-loader'
- },
- {
- exclude:/\.(js|less|css|png|jpg|gif)/,
- loader:'file-loader',
- options:{
- name:'[hash:10].[ext]'
- }
- }
- ]
- }
- ]
- },
- }
缓存
1.babel缓存-->第二次打包更快
- {
- test:/\.js$/,
- exclude:/node_modules/,
- loader:'babel-loader',
- options:{
- // 预设 :指示babel做怎样的兼容性处理
- presets:[
- [
- '@babel/preset-env',
- {
- //按需加载
- useBuiltIns:'usage',
- //指定core-js版本
- corejs:{
- version:3
- },
- //指定兼容性做到哪个版本的浏览器
- targerts:{
- chrome: '40',
- fixfox: '50',
- ie: '9',
- safari: '10',
- edge: '17'
- }
- }
- ]
- ],
- //第二次构建时,会读取之前的缓存
- cacheDirectory: true
- }
- },
文件资源缓存-->上线缓存优化
- hash:每次webpack构建会生成一个唯一hash值
- 问题: 因为js和css同时使用一个hash值,如果重新打包,会导致所有缓存失效,可能我却只改了一个文件,
- chunkhash:根据chunk生成hash值,如果打包来源于同一个chunk,那么hash值也一样
- 问题:js和css的hash值还是一样的。
- 原因:css是由js引入的,所以属于同一个chunk
- contenthash: 根据文件内容生成hash值,
- webpack.config.js
tree shaking
去除应用程序中没有使用的代码
- 前提:
- 1.必须使用es6模块化
- 2.开启production模式
-
- 在package.json中配置
- "sideEffects":false 所有代码都没有副作用,都可以镜像tree sharking
- 问题 可能会把css/@babel/polyfille 干掉
- "sideEffects": ["*.css","*.less"] 哪些文件不 tree sharking
code split
1.入口配置
- 单入口 //单页面应用
- entry:'./src/js/index.js'
- 多入口 //多页面应用
- entry:{
- index:'./src/js/index.js',
- test:'./src/js/test.js'
- }
optimization
- module.exports={
- //...
- // 可以将nodemudules中的代码单独打包成一个chunk最终输出
- // 还可以自动分析多入口chunk中,有没有公共的文件,如果有会打包成一个单独的chunk
- optimization:{
- splitChunks:{
- chunks:'all'
- }
- }
- }
import 动态导入语法,能将某个文件单独打包
通过js代码,让某个文件被单独打包成一个chunk,通过注释可以固定此文件的名称
- import('./xx/xxx.js')
- .then(res =>{
- //加载成功
- })
- .catch(()=>{
- //加载失败
- })
懒加载和预加载
1.懒加载 当文件需要用时才加载
import 动态导入语法
- document.getElementById('btn').onclick = function(){
- import('./xx/ss.js')
- .then(res=>{
- //干啥干啥
- })
- }
预加载 webpackPrefetch:true
./xx/ss.js 已经被加载了,点击的时候再从缓存中加载,
- document.getElementById('btn').onclick = function(){
- import('./xx/ss.js')
- .then(res=>{
- //干啥干啥
- })
- }
正常加载可以认为是并行加载(同一时间加载多个文件) 预加载prefectch 等其他资源加载完毕,浏览器空闲了,再偷偷加载资源 兼容性比较差 慎用
PWA 渐进式网络开发应用程序
网络离线可访问
webbox-->webbox-webpack-plugin
- const WebboxWebpackPlugin = require('webbox-webpack-plugin')
- module.exports={
- plugins:[
- new WebboxWebpackPlugin.GenerateSW({
-
- clientsClaim:true,
- skipWaiting:true
- })
- ]
- }
-
- index.js 中注册serviceworker
- //处理兼容性
- if('serviceWorker' in navigator){
- window.addEventListener('load',()=>{
- navigator.serviceWorker
- .register('./service-work.js')
- .then(()=>{
- //成功
- })
- .catch(()=>{
- //失败
- })
- })
- }
-
- 1.可能会出现问题 eslint不认识window和navigator
- 解决 package.json中eslintConfig中配置
- "env":{
- "browser":true //支持浏览器端的变量
- }
-
- 2. sw代码必须运行在服务器上
- -->node.js
- --> npm i serve -g
- serve -s build 启动一个服务器将build下的资源作为静态资源暴露出去
多进程打包
thread-loader 一般给babel-loader用
但需要注意
进程启动大约需500ms,进程间通信也有开销。只有工作消耗时间比较长,才需要多进程打包
- {
- test:/\.js$/,
- exclude:/node_modules/,
- use:[
- //'thread-loader',
- {
- loader:'thread-loader',
- options:{
- workers: 2 //进程2个
- }
- }
- {
- loader:'babel-loader',
- options:{
- // 预设 :指示babel做怎样的兼容性处理
- presets:[
- [
- '@babel/preset-env',
- {
- //按需加载
- useBuiltIns:'usage',
- //指定core-js版本
- corejs:{
- version:3
- },
- //指定兼容性做到哪个版本的浏览器
- targerts:{
- chrome: '40',
- fixfox: '50',
- ie: '9',
- safari: '10',
- edge: '17'
- }
- }
- ]
- ],
- //第二次构建时,会读取之前的缓存
- cacheDirectory: true
- }
- }
- ]
- },
externals
- module.exports={
- externals:{
- //忽略/拒绝 库名 -- npm 包名
- //可以在index.html中引入cdn
- }
- }
dll 动态连接
使用dll技术 对某些库(第三方库) 进行单独打包
- 指令 webpack --config webpack.dll.js
- webpack.dll.js
- const {resolve} = require('path')
- const webpack = require('webpack')
- module.exports = {
- entry:{
- //最终打包生成的[name]-->jquery
- //['jquery']-->要打包的库是jquery
- jquery:['jquery']
- },
- ouput:{
- filename:'[name].js',
- path:resolve(__dirname,'dll'),
- library:'[name]_[hash]' //打包的库里面向外暴露出去的内容叫什么名字
- },
- plugin:[
- new webpacl.DllPlugin({
- //打包生成一个manifest.json --> 提供和jquery映射
- name: '[name]_[hash]',//映射库的暴露内容名称
- path:resolve(__dirname,'dll/manifest.json')
-
- })
- ],
- mode:'production'
- }
-
- webpack.config.js
- const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')
- module.exports={
- plugins:[
- //告诉webpack哪些库不参与打包,同时名称也得变
- new webpack.DllReferencePlugin({
- manifest: resolve(__dirname,'dll/manifest.json')
- }),
- //将某个文件打包输出出去,并在html中引入该资源
- new AddAssetHtmlWebpackPlugin({
- filepath:resolve(__dirname,'dll/jquery.js')
- })
- ]
- }
编辑推荐