国外js特效网站,网上注册公司申请入口,电子商务网站建设考试试题,公司重名 做网站优化webpack性能时#xff0c;主要集中在两个方面#xff1a;优化构建后的结果和优化构建时的速度。前一篇文章已经介绍了如何通过webpack的分包来优化构建后的结果。而在本篇文章中#xff0c;我们将从减少打包体积的角度来探讨。
1.通过CDN链接引入第三方库 CDN是指通过相… 优化webpack性能时主要集中在两个方面优化构建后的结果和优化构建时的速度。前一篇文章已经介绍了如何通过webpack的分包来优化构建后的结果。而在本篇文章中我们将从减少打包体积的角度来探讨。
1.通过CDN链接引入第三方库 CDN是指通过相互连接的网络系统利用最靠近每个用户的服务器以更快、更可靠的方式将音乐、图片、视频、应用程序以及其他文件发送给用户从而实现高性能、可扩展性和低成本的网络内容传递。
平时在开发中我们使用CDN主要有两种方式
将打包的所有静态资源放到CDN服务器。让用户所有资源都是通过CDN服务器加载。通过利用知名第三方库的CDN我们可以避免将这些库打包到我们的项目中从而降低打包体积。
本文的重点是减少打包体积因此我们将重点讨论第二种方式。
步骤一首先通过在webpack.config.js中的配置排除对这些库的打包 // webpack.config.js
const { resolve } require(path);module.exports {entry: ./src/main.js,output: {filename: bundle.js,path: resolve(__dirname, build),},// 排除打包dayjsexternals: {lodash: _,},
}; 强调在externals这个对象中 lodash 作为属性名key 这表示当你在代码中导入 lodash 时实际上不会将 lodash 包含在你的输出文件中而是期望它在运行时从外部引入。_ 作为属性值value 假定在运行环境中已经有一个全局的 _ 对象或者模块 外部扩展(Externals) | webpack 中文文档 (docschina.org)
步骤二在html模块中加入第三方库的CDN服务器地址
推荐一个国内比较好用的CDN是 bootcdn
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 导入第三方库的CDN --script srchttps://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js/script/script
/head
body/body
/html
2. 代码压缩
2.1 JavaScript的压缩 压缩JavaScripte文件可以使用Terser压缩工具Terser可以帮助我们压缩、丑化我们的代码让我们的bundle变得更小。webpack v5 开箱即带有最新版本的 terser-webpack-plugin。 在Webpack中有一个名为minimizer属性它在生产模式下默认开启使用TerserPlugin来处理代码。这意味着Webpack会自动使用TerserPlugin来压缩和优化JavaScript代码以减小文件大小并提高性能。 如果你不满意默认配置你可以自己创建TerserPlugin的实例并覆盖相关配置。这允许你根据项目的需求自定义代码压缩和优化使Webpack配置变得灵活而适应各种场景。总之minimizer属性允许你控制生产模式下的代码压缩提供了定制化的选项以满足你的需求。 optimization: {minimize: true,minimizer: [new TerserPlugin({extractComments: true, //默认值为true表示会将注释抽取到一个单独的文件中parallel: true, //使用多进程并发运行提高构建的速度默认值是true并发运行的默认os.cpus().length - 1//在这里设置tenser相关的配置terserOptions: {// 设置压缩相关的代码compress:{ecma: 5, // 设置输出所需的EcmaScript标准版本unused: false // 是否删除未引用的函数和变量arrows: true, //class或者object中的函数转换成箭头函数dead_code: true //移除不可达的代码tree shaking},toplevel: true, // 是否转换顶级作用域中声明的名称。keep_classnames: true, // 保留类名,keep_fnames: true // 保留函数的名称}})],},
这里面的配置非常多具体可以看terser文档
2.2 css的压缩
压缩CSS通常是去除无用的空格等因为很难去修改选择器、属性的名称、值等。压缩CSS可以使用webpack的一个插件css-minimizer-webpack-plugin
第一步安装 css-minimizer-webpack-plugin npm install css-minimizer-webpack-plugin -D 第二步在optimization.minimizer中配置 optimization: {minimizer: [new cssMinimizerPlugin({parallel: true})],}, 2.3 HTTP的压缩 HTTP压缩 是一种内置在 服务器 和 客户端 之间的以改进传输速度和带宽利用率的方式 HTTP压缩的流程: 第一步HTTP数据在服务器发送前就已经被压缩了可以在webpack中完成 第二步兼容的浏览器在向服务器发送请求时会告知服务器自己支持哪些压缩格式 第三步服务器在浏览器支持的压缩格式下直接返回对应的压缩后的文件并且在响应头中告知浏览器 第一步对HTTP进行压缩怎么实现 2.3.1 Webpack对文件压缩 可以使用 CompressionPlugin 。 第一步安装CompressionPlugin npm install compression-webpack-plugin -D 第二步使用 CompressionPlugin 即可 plugins: [// 生产环境new CompressionPlugin({test: /\.(css|js)$/i, // 匹配哪些文件需要压缩threshold: 0, // 设置文件从多大开始压缩minRatio: 0.8, // 至少的压缩比例algorithm: gzip, // 采用的压缩算法// exclude// include}),] 2.3.2 HTML文件中代码的压缩 我们之前使用了 HtmlWebpackPlugin 插件来生成HTML的模板事实上它还有一些其他的配置 inject设置打包的资源插入的位置 true、 false 、body、head cache设置为true只有当文件改变时才会生成新的文件默认值也是true minify默认会使用一个插件html-minifier-terser plugins: [new HtmlWebpackPlugin({template: ./index.html,// inject: bodycache: true, // 当文件没有发生任何改变时, 直接使用之前的缓存minify: isProduction ? {removeComments: false, // 是否要移除注释removeRedundantAttributes: false, // 是否移除多余的属性removeEmptyAttributes: true, // 是否移除一些空属性collapseWhitespace: false,removeStyleLinkTypeAttributes: true,minifyCSS: true,minifyJS: {mangle: {toplevel: true}}}: false}),], 5. Tree Shaking Tree Shaking 是一个术语在计算机中表示 消除死代码dead_code 最早的想法起源于LISP用于 消除未调用的代码 纯函数无副作用可以放心的消除这也是为什么要求我们在进 行函数式编程时尽量使用纯函数的原因之一后来 Tree Shaking 也被应用于其他的语言比如JavaScript、Dart 5.1 JavaScript的Tree Shaking
对JavaScript进行Tree Shaking是源自打包工具rollup 这是因为Tree Shaking依赖于ES Module的静态语法分析不执行任何的代码可以明确知道模块的依赖关系 webpack2正式内置支持了ES2015模块和检测未使用模块的能力 在webpack4正式扩展了这个能力并且通过 package.json的 sideEffects属性作为标记告知webpack在编译时 哪里文件可以安全的删除掉 webpack5中也提供了对部分CommonJS的Tree Shaking的支持 https://github.com/webpack/changelog-v5#commonjs-tree-shaking
5.2 webpack实现Tree Shaking
事实上webpack实现Tree Shaking采用了两种不同的方案
usedExports通过标记某些函数是否被使用之后通过Terser来进行优化的 sideEffects直接查看该文件是否有副作用如果没有副作用并且没有被使用则直接删除该模块
5.2.1 usedExports 将mode设置为development模式 为了可以看到 usedExports带来的效果我们需要设置为 development 模式 因为在 production 模式下webpack默认的一些优化会带来很大额影响。 设置 usedExports 为true和false对比打包后的代码 在usedExports设置为true时会有一段注释unused harmony export mul 这段注释的意义是什么呢告知Terser在优化时可以删除掉这段代码 这个时候我们将 minimize 设置true利用Terser对JavaScript进行压缩 usedExports设置为false时mul函数没有被移除掉 usedExports设置为true时mul函数被移除掉 所以 usedExports 实现 Tree Shaking 是结合 Terser 来完成的。 5.2.2 sideEffects sideEffects 用于告知webpack compiler哪些模块是没有有副作用的 副作用的意思是这里面的代码有执行一些特殊的任务比如这个模块中修改了全局变量不能仅仅通过export来判断这段代码的意义 在 package.json 中设置 sideEffects 的值 将sideEffects设置为false就是告知webpack可以安全的删除未用到的exports 如果有一些模块是有副作用一些模块是没有副作用的可以设置为数组 package.json sideEffects: false, // 全部的模块都没有副作用
sideEffects: [./src/format.js, *.css ], //这两个文件没有副作用在没有被使用时可以放心的删除 比如我们有一个format.js、style.css文件 在sideEffects中指定这两个文件无副作用该文件在导入时没有使用任何的变量来接受这两个文件的内容没有被其他模块使用 那么打包后的文件不会保留format.js、style.css相关的任何代码 还可以通过 module.rules 来配置 module: {rules: [{test: /\.css/i,use: [isProduction ? MiniCssExtractPlugin.loader: style-loader, css-loader],sideEffects: true},],}, 参考:
webpack性能优化二减少打包体积 - 掘金 (juejin.cn)
