北海建设工程信息网站,自贡网站设计,网站响应速度验收,网站搭建规划文章目录 如何优化#xff1f;简单介绍一下1.JS代码压缩2、CSS代码压缩3、Html文件代码压缩4、文件大小压缩5、图片压缩6、内联chunk 总结 如何优化#xff1f;
通过webpack优化前端的手段有#xff1a;
JS代码压缩CSS代码压缩Html文件代码压缩文件大小压缩图片压缩
简单… 文章目录 如何优化简单介绍一下1.JS代码压缩2、CSS代码压缩3、Html文件代码压缩4、文件大小压缩5、图片压缩6、内联chunk 总结 如何优化
通过webpack优化前端的手段有
JS代码压缩CSS代码压缩Html文件代码压缩文件大小压缩图片压缩
简单介绍一下
1.JS代码压缩 terser是一个JavaScript的解释、绞肉机、压缩机的工具集可以帮助我们压缩、丑化我们的代码让bundle更小 在production模式下webpack 默认就是使用 TerserPlugin 来处理我们的代码的。如果想要自定义配置它配置方法如下
const TerserPlugin require(terser-webpack-plugin)
module.exports {...optimization: {minimize: true,minimizer: [new TerserPlugin({parallel: true // 电脑cpu核数-1})]}
}属性介绍如下1、extractComments默认值为true表示会将注释抽取到一个单独的文件中开发阶段我们可设置为 false 不保留注释
2、parallel使用多进程并发运行提高构建的速度默认值是true并发运行的默认数量 os.cpus().length - 1
3、terserOptions设置我们的terser相关的配置
4、compress设置压缩相关的选项mangle设置丑化相关的选项可以直接设置为true
5、mangle设置丑化相关的选项可以直接设置为true
6、toplevel底层变量是否进行转换
7、keep_classnames保留类的名称
8、keep_fnames保留函数的名称2、CSS代码压缩 CSS压缩通常是去除无用的空格等因为很难去修改选择器、属性的名称、值等 CSS的压缩我们可以使用另外一个插件css-minimizer-webpack-plugin
npm install css-minimizer-webpack-plugin -D配置方法如下
const CssMinimizerPlugin require(css-minimizer-webpack-plugin)
module.exports {// ...optimization: {minimize: true,minimizer: [new CssMinimizerPlugin({parallel: true})]}
}3、Html文件代码压缩 使用HtmlWebpackPlugin插件来生成HTML的模板时候通过配置属性minify进行html优化 module.exports {...plugin:[new HtmlwebpackPlugin({...minify:{minifyCSS:false, // 是否压缩csscollapseWhitespace:false, // 是否折叠空格removeComments:true // 是否移除注释}})]
}设置了minify实际会使用另一个插件html-minifier-terser 4、文件大小压缩 对文件的大小进行压缩减少http传输过程中宽带的损耗 npm install compression-webpack-plugin -D
----------------------------------------------
new ComepressionPlugin({test:/\.(css|js)$/, // 哪些文件需要压缩threshold:500, // 设置文件多大开始压缩minRatio:0.7, // 至少压缩的比例algorithm:gzip, // 采用的压缩算法
})
5、图片压缩 一般来说在打包之后一些图片文件的大小是远远要比 js 或者 css 文件要来的大所以图片压缩较为重要 配置如下
module: {rules: [{test: /\.(png|jpg|gif)$/,use: [{loader: file-loader,options: {name: [name]_[hash].[ext],outputPath: images/,}},{loader: image-webpack-loader,options: {// 压缩 jpeg 的配置mozjpeg: {progressive: true,quality: 65},// 使用 imagemin**-optipng 压缩 pngenable: false 为关闭optipng: {enabled: false,},// 使用 imagemin-pngquant 压缩 pngpngquant: {quality: 65-90,speed: 4},// 压缩 gif 的配置gifsicle: {interlaced: false,},// 开启 webp会把 jpg 和 png 图片压缩为 webp 格式webp: {quality: 75}//sideEffects用于告知webpack compiler哪些模块时有副作用配置方法是在package.json中设置sideEffects属性sideEffecis:[./src/util/format.js,*.css // 所有的css文件]//usedExports配置方法也很简单只需要将usedExports设为trueoptimization:{usedExports}}}]},]
} 6、内联chunk 可以通过InlineChunkHtmlPlugin插件将一些chunk的模块内联到html如runtime的代码对模块进行解析、加载、模块信息相关的代码代码量并不大但是必须加载的 总结
关于webpack对前端性能的优化可以通过文件体积大小入手其次还可通过分包的形式、减少http请求次数等方式实现对前端性能的优化
