智慧团建登陆网站,网站建设视频教程 百度云,扬中网站建设门户报价,做外围网站犯法吗webpack 高级配置
其实就是对 webpack 进行优化#xff0c;让代码在编译/运行时性能更好
1. 提升开发体验 2. 提升打包构建速度 3. 减少代码体积 4. 优化代码运行性能 一、提升开发体验
sourcemap
在编译打包后所有的 css 和 js 都合并为了一个文件#xff0c;并多了很多… webpack 高级配置
其实就是对 webpack 进行优化让代码在编译/运行时性能更好
1. 提升开发体验 2. 提升打包构建速度 3. 减少代码体积 4. 优化代码运行性能 一、提升开发体验
sourcemap
在编译打包后所有的 css 和 js 都合并为了一个文件并多了很多其他代码如果此时代码运行出错提示的错误位置很难定位。所以开发者需要更准确的错误提示来进行开发工作。
SourceMap 源代码映射是一个用来生成源代码与构建后代码一一映射的文件的方案。
它会生成一个 xxx.map 文件里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错后会通过 xxx.map 文件从构建后代码的出错位置找到映射后源代码的出错位置从而让浏览器提示源代码的错误位置。
使用
Devtool | webpack 中文文档 | webpack 中文文档 | webpack 中文网
实际开发中只需要关注两种情况
开发模式cheap-module-source-map 优点打包编译速度快只包含行映射缺点没有列映射
module.export {//其他省略mode:development,devtool:cheap-module-source-map};
生产模式source-map 优点包含行/列映射缺点打包编译速度更慢
module.export {//其他省略mode:production,devtool:source-map}; 生产模式下一定要关心列的位置因为生产模式打完完成后只有一行代码如果不看列位置也就无法定位错误位置。 二、提升打包构建速度
HMRHotModuleReplacement热模块替换
只在开发模式下有效生产模式中是不存在的。
开发时如果修改了其中某一个模块的代码webpack 默认会将所有模块全部重新打包编译速度比较慢。
所以需要做到修改某个模块的代码时就只有这个模块的代码需要重新打包编译其他的模块不变这样打包的速度也会更快。
HMR在程序运行中替换、添加或删除模块而无需重新加载整个页面。
HotModuleReplacementPlugin | webpack 中文文档 | webpack 中文文档 | webpack 中文网
css 经过 style-loader 处理已经具备 HMR 的功能了但是 js 还不行在实际开发中一般使用其他 loader 来解决。比如 vue-loader 和 react-hot-loader 。 oneOf
正常文件在进入配置文件时是会查看所有的loader的即使 css 文件在第一个 css-loader 已经进行处理后也会将全部 loader 都查看一遍。
oneOf 让文件只让一个 loader 进行处理。
只需要将 rule 下的 loader 都用 oneOf 包裹起来就可以了。这样在执行时如果第一个 loader 被命中就不会再查看后续 loader。
module.exports {//...module: {rules: [{test: /\.css$/,oneOf: [{resourceQuery: /inline/, // foo.css?inlineuse: url-loader,},{resourceQuery: /external/, // foo.css?externaluse: file-loader,},],},],},
};include/exclude 只针对 js 文件进行处理
开发时需要使用第三方的库或者插件所有文件都下载到 node_modules 文件夹中而这些文件是不需要编译可以直接使用的。
所以在对 js 文件进行打包处理时需要排除 node_modules 文件夹下目录。
include 包含只处理 xxx 文件exclude 排除除了 xxx 文件以外的其他文件都被处理。
只是用来处理 js 文件的样式文件等都不可用 只能使用一个不能同时使用 cache
每次打包时 js 文件都要经过 Eslint 检查和 babel 编译速度比较慢。可以设置缓存之前的 Eslint 检查和 babel 编译结果这样二次打包时速度就会更快。
作用就是对 Eslint 检查和 babel 编译结果进行缓存。 // 配置loadermodule: {rules: [// 处理 js{test:/\.jsx?$/,include:path.resolve(__dirname,../src),loader:babel-loader,//babel 也需要有一个 babel 的配置文件options:{catchDirectory:true,catchCompression:false,plugins:[react-refresh/babel,//用来解决react脚手架下 js不能热更新的问题]}}]},// 配置plugin// 处理html plugin:[//eslint 插件也是需要有自己的配置文件new EslintWebpackPlugin({context:path.resolve(__dirname,../src),exclude:node_modules,cache:true, cacheLocation:path.resolve(__dirname,../node_modules/.catch/.eslintcache),}),new HtmlWebpackPlugin({template:path.resolve(__dirname,../public/index.html),}),new ReactRefreshWebpackPlugin()//用来解决react脚手架下 js不能热更新的问题], Thead
当项目越来越大时打包的速度会越来越慢想要继续提升打包速度其实就是要提升 js 的打包速度因为 js 文件是量最多的而对 js 文件处理主要是三个工具eslint、babel、Terser 三个工具所以需要提升工具的运行速度。
可以开启多进程同时处理 js 文件这样速度就会比之前的单进程打包更快。
⚠️注意开启多线程仅需要在特别耗时的操作中使用因为每个进程启动大概就会有 600 ms的开销。
启动进程的数量就是 CPU 的核数获取 cpu 核数 // node js 的核心模块可以直接使用 const os require(os); // cpu 核数 const threads os.cpus().length; const TerserPlugin require(terser-webpack-plugin);module.exports {optimization: {minimize: true,minimizer: [new TerserPlugin({parallel: threads,//启用多进程并发运行并设置并发运行次数})],},
}; optimization 选项专门用来放置压缩文件插件的css、js、图片等压缩插件都可以在里面 new。 三、减少代码体积
Tree Shaking
开发时会定义一些工具函数库或者引用第三方工具函数库或组件库。
如果没有经过特殊处理打包时会引入整个库但是实际上可能业务中只用到了极小一部分功能整个库打包进代码体积过大。
Tree Shaking 是一个术语描述为移除 js 中没有使用上的代码。依赖于 ES Module。
webpack 已经默认开启了该功能无需其他配置。 babel
babel-loader | webpack 中文文档 | webpack 中文文档 | webpack 中文网
babel 为编译的每个文件都插入了辅助代码使代码体积比较大babel对一些公共方法使用了非常小的辅助代码如_extend。默认情况下会被添加到每一个需要它的文件中。可以将这些辅助代码 Babel runtime 作为一个独立的模块来避免重复引入。
下面的配置禁用了 Babel 自动对每个文件的 runtime 注入而是引入 babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。
rules: [// transform-runtime 插件告诉 Babel// 要引用 runtime 来代替注入。{test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use: {loader: babel-loader,options: {presets: [babel/preset-env],plugins: [babel/plugin-transform-runtime]}}}
] Image Minimizer
ImageMinimizerWebpackPlugin | webpack 中文文档 | webpack 中文文档 | webpack 中文网
开发的项目中如果引用了较多的图片那么图片体积就会比较大将来请求的速度比较慢可以对图片进行压缩减少图片体积。
⚠️注意如果项目中图片为在线链接就不用压缩压缩的前提是必须为本地项目静态图片。 四、优化代码的运行性能
Code Split
打包代码时会将所有的 js 文件打包到一个文件中体积太大了。如果只渲染首页就应该只加载首页的 js 文件其他文件暂时不加载。
所以需要对打包生成的文件进行代码分割生成多个 js 文件渲染哪个页面就只加载某个js文件这样加载的资源少速度更快。
代码分割Code Split主要做了两件事
分割文件将打包生成的文件进行分割生成多个 js 文件。按需加载需要哪个文件就加载哪个文件。
多入口 entry: {//多个入口文件main: ./src/main.js,app: ./src/app.js,},output: {path: path.resolve(__dirname, ../dist),//设置出口文件路径filename: static/js/[name].[contenthash:10].js,//加入哈希值chunkFilename: static/js/[name].[contenthash:10].chunk.js,//加入哈希值assetModuleFilename: static/media/[hash:10][etx][query],clean: true,//将上次打包内容清空},
多入口提取公共组件
在多个入口文件存在着相同的模块时将相同部分单独抽离出来变成可复用的文件。在 optimization 模块下的设置 splitChunks 。
optimization: {//代码分割配置splitChunks: {chunks: all},
}
按需加载 动态引入
import 动态导入会将动态导入的文件进行代码分割拆分成单独的模块在需要的时候自动加载。
单文件 单入口
如果在进行动态导入时eslint 不能识别需要在 eslint 配置文件中进行单独配置设置 plugins:[import]用来解决动态导入语法报错。
统一命名规则
需要用到的地方
output 中入口文件打包输出的文件名 filename动态加载打包输出的其他文件名 chunkFilename。loader 模块 module 中图片、字体图标等命名 filename。 plugins 插件中打包样式的命名 filename 。 output: {path: path.resolve(__dirname, ../dist),//设置出口文件路径filename: static/js/[name].[contenthash:10].js,//加入哈希值chunkFilename: static/js/[name].[contenthash:10].chunk.js,//加入哈希值assetModuleFilename: static/media/[hash:10][etx][query],clean: true,//将上次打包内容清空},
Preload/ Prefetch
前面使用的代码分割同时会使用动态导入语法来进行按需加载懒加载。但是加载速度不够好比如
当用户点击按钮时才加载这个资源如果资源的体积很大那么用户会感觉到卡顿。
如果想在浏览器空闲时间加载后续需要使用的资源就用到 preload/prefetch 技术。
Preload通知浏览器立即加载资源。Prefetch通知浏览器在空闲时间时才开始加载资源。
共同点
都只会加载资源并不执行。都有缓存。
不同点
preload 加载的优先级高prefetch 加载优先级低。preload只能加载当前页面需要使用的资源prefetch可以加载当前页面资源也可以加载下一个页面需要使用的资源。
在当前页面优先级高的资源用 preload 加载下一个页面需要使用的资源用 prefetch 加载。二者的兼容性都比较差preload 相对于 prefetch 兼容性好一点可以去Can I Use 网站查询 API 的兼容性问题。
Network Cache
如果 a 文件依赖于 b 文件而 b 文件进行了修改那么 a 文件也需要重新打包为了解决这种问题需要把文件依赖的哈希值抽成一个 runtime 文件这样在依赖发生修改时只有该依赖文件和 runtime 文件的缓存失效缓存更持久化。 CoreJs
解决 js 兼容性问题
过去使用 babel 对 js 代码进行兼容性处理其中使用babel/preset-env 智能预设来处理兼容性问题。它能将 ES6 的一些语法进行编译转换比如箭头函数扩展运算符等。但是如果是 async 函数、promise 对象、数组的一些方法等就没有办法处理。
所以此时代码中依然存在着 js 兼容性问题一旦遇到低版本浏览器会直接报错。所以用 core-js 来解决。
core-js 是专门用来做 ES6 及以上 API 的 polyfill。polyfill 翻译为垫片/补丁就是用社区上提供的一段代码让在不兼容某些新特性的浏览器上使用该新特性。
方式一入口文件 main.js 直接引入
import core-js;
按需加载import core-js/es/promise;只使用promise需要使用什么新语法就直接加载哪个包但此时也会带来新的问题在代码越写越多时一旦用到新写法都要进行重新引入。
方式二 babel 配置文件的智能预设选项 module.exports {presets: [[babel/preset-env,{useBuiltins:usage//按需加载 自动引入corejs:3 //corejs版本}]],
}; PWA
