前端必会的Webpack优化技巧

前端必会的Webpack优化技巧

目录

webpack优化很有必要

构建时间优化

thread-loader

cache-loader

开启热更新

exclude & include

构建区分环境

提升webpack版本

打包体积优化

CSS代码压缩

JS代码压缩

tree-shaking

source-map类型

打包体积分析

用户体验优化

模块懒加载

Gzip

小图片转base64

合理配置hash

webpack优化很有必要

上一篇文章给大家讲解了简单搭建一个Vuecli,但是只是基本搭建,而没有进行进一步的优化。

而使用webpack打包躲不开的就是webpack优化这个话题,无论是面试还是实际开发,优化都是非常重要的事情,毕竟提升用户体验是我们前端工程师的职责

构建时间优化

首先就是构建时间的优化了

thread-loader

多进程打包,可以大大提高构建的速度,使用方法是将thread-loader放在比较费时间的loader之前,比如babel-loader

由于启动项目和打包项目都需要加速,所以配置在webpack.base.js

npm i thread-loader -D // webpack.base.js { test: /\.js$/, use: [ 'thread-loader', 'babel-loader' ], } } cache-loader

缓存资源,提高二次构建的速度,使用方法是将cache-loader放在比较费时间的loader之前,比如babel-loader

由于启动项目和打包项目都需要加速,所以配置在webpack.base.js

npm i cache-loader -D // webpack.base.js { test: /\.js$/, use: [ 'cache-loader', 'thread-loader', 'babel-loader' ], }, 开启热更新

比如你修改了项目中某一个文件,会导致整个项目刷新,这非常耗时间。如果只刷新修改的这个模块,其他保持原状,那将大大提高修改代码的重新构建时间

只用于开发中,所以配置在webpack.dev.js

// webpack.dev.js //引入webpack const webpack = require('webpack'); //使用webpack提供的热更新插件 plugins: [ new webpack.HotModuleReplacementPlugin() ], //最后需要在我们的devserver中配置 devServer: { + hot: true }, exclude & include

exclude:不需要处理的文件

include:需要处理的文件

合理设置这两个属性,可以大大提高构建速度

webpack.base.js中配置

// webpack.base.js { test: /\.js$/, //使用include来指定编译文件夹 include: path.resolve(__dirname, '../src'), //使用exclude排除指定文件夹 exclude: /node_modules/, use: [ 'babel-loader' ] }, 构建区分环境

区分环境去构建是非常重要的,我们要明确知道,开发环境时我们需要哪些配置,不需要哪些配置;而最终打包生产环境时又需要哪些配置,不需要哪些配置:

开发环境:去除代码压缩、gzip、体积分析等优化的配置,大大提高构建速度

生产环境:需要代码压缩、gzip、体积分析等优化的配置,大大降低最终项目打包体积

上篇文章已经带大家进行了环境区分

提升webpack版本

webpack版本越新,打包的效果肯定更好

打包体积优化

主要是打包后项目整体体积的优化,有利于项目上线后的页面加载速度提升

本项目已经是webpack最新版本

CSS代码压缩

CSS代码压缩使用css-minimizer-webpack-plugin,效果包括压缩、去重

代码的压缩比较耗时间,所以只用在打包项目时,所以只需要在webpack.prod.js中配置

npm i css-minimizer-webpack-plugin -D // webpack.prod.js const CssMinimizerPlugin = require('css-minimizer-webpack-plugin') optimization: { minimizer: [ new CssMinimizerPlugin(), // 去重压缩css ], } JS代码压缩

JS代码压缩使用terser-webpack-plugin,实现打包后JS代码的压缩

代码的压缩比较耗时间,所以只用在打包项目时,所以只需要在webpack.prod.js中配置

npm i terser-webpack-plugin -D // webpack.prod.js const TerserPlugin = require('terser-webpack-plugin') optimization: { minimizer: [ new CssMinimizerPlugin(), // 去重压缩css new TerserPlugin({ // 压缩JS代码 terserOptions: { compress: { drop_console: true, // 去除console }, }, }), // 压缩JavaScript ], } tree-shaking

tree-shaking简单说作用就是:只打包用到的代码,没用到的代码不打包,而webpack5默认开启tree-shaking,当打包的modeproduction时,自动开启tree-shaking进行优化

module.exports = { mode: 'production' } source-map类型

source-map的作用是:方便你报错的时候能定位到错误代码的位置。它的体积不容小觑,所以对于不同环境设置不同的类型是很有必要的。

开发环境

开发环境的时候我们需要能精准定位错误代码的位置

// webpack.dev.js module.exports = { mode: 'development', devtool: 'eval-cheap-module-source-map' }

生产环境

生产环境,我们想开启source-map,但是又不想体积太大,那么可以换一种类型

// webpack.prod.js module.exports = { mode: 'production', devtool: 'nosources-source-map' } 打包体积分析

使用webpack-bundle-analyzer可以审查打包后的体积分布,进而进行相应的体积优化

只需要打包时看体积,所以只需在webpack.prod.js中配置

npm i webpack-bundle-analyzer -D // webpack.prod.js const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') plugins: [ new BundleAnalyzerPlugin(), ] 用户体验优化 模块懒加载

如果不进行模块懒加载的话,最后整个项目代码都会被打包到一个js文件里,单个js文件体积非常大,那么当用户网页请求的时候,首屏加载时间会比较长,使用模块懒加载之后,大js文件会分成多个小js文件,网页加载时会按需加载,大大提升首屏加载速度

// src/router/index.js const routes = [ { path: '/login', name: 'login', component: login }, { path: '/home', name: 'home', // 懒加载 component: () => import('../views/home/home.vue'), }, ] Gzip

开启Gzip后,大大提高用户的页面加载速度,因为gzip的体积比原文件小很多,当然需要后端的配合,使用compression-webpack-plugin

只需要打包时优化体积,所以只需在webpack.prod.js中配置

npm i compression-webpack-plugin -D // webpack.prod.js const CompressionPlugin = require('compression-webpack-plugin') plugins: [ // 之前的代码... // gzip new CompressionPlugin({ algorithm: 'gzip', threshold: 10240, minRatio: 0.8 }) ] 小图片转base64

对于一些小图片,可以转base64,这样可以减少用户的http网络请求次数,提高用户的体验。webpack5url-loader已被废弃,改用asset-module

webpack.base.js中配置

// webpack.base.js { test: /\.(png|jpe?g|gif|svg|webp)$/, type: 'asset', parser: { // 转base64的条件 dataUrlCondition: { maxSize: 25 * 1024, // 25kb } }, generator: { // 打包到 image 文件下 filename: 'images/[contenthash][ext][query]', }, }, 合理配置hash

我们要保证,改过的文件需要更新hash值,而没改过的文件依然保持原本的hash值,这样才能保证在上线后,浏览器访问时没有改变的文件会命中缓存,从而达到性能优化的目的

webpack.base.js中配置

// webpack.base.js output: { path: path.resolve(__dirname, '../dist'), // 给js文件加上 contenthash filename: 'js/chunk-[contenthash].js', clean: true, },

以上就是前端必会的Webpack优化技巧的详细内容,更多关于前端Webpack优化技巧的资料请关注易知道(ezd.cc)其它相关文章!

推荐阅读

    学习写字楼新选择6000元主流配置

    学习写字楼新选择6000元主流配置,,这种配置需要考虑双核心的办公和娱乐平台,充分考虑办公室的办公需求和娱乐需求,以约6000元的预算和cost-e

    酷睿I7 配置

    酷睿I7 配置,配置,玩家国度啦华硕 Rampage II Extreme(3800元)如果米不够,也可以把Extreme改为Gene,不过是小板内存推荐金士顿6G DDR3 2000骇

    提高3A四核羿龙II游戏配置的性能

    提高3A四核羿龙II游戏配置的性能,,以节能环保为主题的IT产业,目前3A低端平台处理器、主板芯片组、独立开发卡性能突出,特别是在与AMD的处理

    opporeno8参数配置及价格

    opporeno8参数配置及价格,面部,亿元,Oppo的荣誉2020年1月4日,接近屏幕关闭传感器是否支持双卡:支持oppor11splus什么时候上市的Oppo R11S P

    查看配置:酷睿i3530集展示办公平台

    查看配置:酷睿i3530集展示办公平台,,由于时间和精力的关系,我们不可能对所有的配置进行评论,希望我们能理解,我希望我们的评论能在那些需要帮

    3500元超额值学生娱乐结构的优化配置

    3500元超额值学生娱乐结构的优化配置,,作为一个DIY的主流用户领域的学生,每个用户51学生攒机的高峰。因为学生用户没有稳定的收入来源,攒机

    优化PostgreSQL中的批量更新性能

    优化PostgreSQL中的批量更新性能,数据,表格,在Ubuntu 12.04上使用PG 9.1. 我们目前需要24小时才能运行大量UPDATE数据库上的语句,其形式

    电脑配置快捷键|查看电脑配置快捷键

    电脑配置快捷键|查看电脑配置快捷键,,查看电脑配置快捷键1.在win10中,快捷键组合win+E已经变成了“快速访问”,不再是以前的“我的电脑了”2