无论是面试还是实际开发，#webpack 优化都是非常重要的

const webpack=require('webpack'); 方法是将thread-loader放在比较费时间的 区分环境去构建是非常重要的,我们要明确知 以对于不同环境设置不同的类型是很有必要的。 source-map的作用是:方便你报错的时候能定 }),//压 JavaScript maxSize:25*1024,//25kb new CssMinimizerPlugin(),//去 压 css include:需要处理的文件 2023年3月10日下午4:18 (4)exclude&include webpack.base.is new TerserPlugin({//压 JS代码 const CssMinimizerPluqin=require('css-minimizer 析等优化的配置,大大降低最终项目打包 开启tree-shaking,当打包的mode为 (1)模块懒加载 npm i thread-loader-D name:'home', compression-we //转base64的条件 minimizer:[ const routes=[ 代码的压缩比较耗时间,所以只用在打包项目 想体积太大,那么可以换一种类型 //打包到image文件下 < (2)JS代码压缩 (2)Gzip npm i cache-loader -D 后的体积分布,进而进行相应的体积优化 generator:{ 化 我们要保证,改过的文件需要更新hash值,而 能保证在上线后,浏览器访问时没有改变的文 (4)source-map类型 因为gzip的体积比原文件小很多,当然需要后 webpack版本越新,打包的效果肯定更好 前,比如babel-loader 置,不需要哪些配置: module.exports={ 积非常大,那么当用户网页请求的时候,首屏 (5)构建区分环境 babel-loader' 使用webpack-bundle-analyzer可以审查打包 实际开发指南 is复制代码 (3)tree-shaking npm i terser-webpack-plugin-D webpack.prod.js中配置 filename:'images/[contenthash][ext][query]', //最后需要在我们的devserver中配置 合理设置这两个属性,可以大大提高构建速度 loader之前,比如babel-loader 1s复制代码 compress:{ 只需要打包时优化体积,所以只需在 代码的重新构建时间 1/使用include来指定编译文件夹 生产环境:需要代码压缩、gzip、体积分 加载,大大提升首屏加载速度 exclude:不需要处理的文件 parser:{ test:八.(png|jpe?g|gif|svg|webp)s/, output:{ (5)打包体积分析 (6)提升webpack版本 在webpack.base.js中配置 目上线后的页面加载速度提升 备忘录 'thread-loader' }=require('webpack-bundle-analyzer') const TerserPlugin=require('terser-webpack-plug 首先就是构建时间的优化了 生产环境,我们想开启source-map,但是又不 test:八.jss/, npm i webpack-bundle-analyzer-D include:path.resolve(_dirname,'../src' 些配置;而最终打包生产环境时又需要哪些配 2、打包体积优化 hot:true dataUrlCondition:{ 开发环境:去除代码压缩、gzip、体积分 验。webpack5中url-loader已被废弃,改用 //给js文件加上contenthash const{ npm i css-minimizer-webpack-plugin-D devtool:'eval-cheap-module-source-map 1、构建时间优化 mode:'development' 'cache-loader' //webpack.base.js 的位置 new BundleAnalyzerPlugin(), 开发环境 4:20 (2)cache-loader //webpack.prod.js type:'asset', 比如你修改了项目中某一个文件,会导致整个 打包后JS代码的压缩 //使用exclude排除指定文件夹 mode:'production' threshold:10240 (3)开启热更新 asset-module // src/router/index.js 道,开发环境时我们需要哪些配置,不需要哪 主要是打包后项目整体体积的优化,有利于项 这个模块,其他保持原状,那将大大提高修改 加载时间会比较长,使用模块懒加载之后,大 new webpack.HotModuleReplacementPlugin() //引入webpack BundleAnalyzerPlugin path:path.resolve(__dirname,',./dist'), devtool:'nosources-source-map' (3)小图片转base64 tree-shaking简单说作用就是:只打包用到的代 CSS代码压缩使用css-minimizer-webpack- const CompressionPlugin plugin,效果包括压缩、去重 component:()=>import('../views/home/home.v |Webpack优化手段 //使用webpack提供的热更新插件 只需要打包时看体积,所以只需在 生产环境 mode:'production plugins:[ (1)thread-loader //webpack.dev.js use:[ 如果不进行模块懒加载的话,最后整个项目代 clean:true, 1/.webpack.dev.js 1/.懒加载 terser0ptions:{ //之前的代码... 将cache-loader放在比较费时间的loader之 没改过的文件依然保持原本的hash值,这样才 minRatio:0.8 js复制代码 析等优化的配置,大大提高构建速度 drop_console:true,//去除console js文件会分成多个小js文件,网页加载时会按需 位到错误代码的位置。它的体积不容小觑,所 一每个前端都必须掌握的一 项目刷新,这非常耗时间。如果只刷新修改的 码,没用到的代码不打包,而webpack5默认 production时,自动开启tree-shaking进行优 (4)合理配置hash 对于一些小图片,可以转base64,这样可以减 面试必备 webpack.base.js ninimizer:[ 件会命中缓存,从而达到性能优化的目的 optimization:{ npm i compression-webpack-plugin-D name:'login', 'babel-loader' new CompressionPlugin({ devServer:{ 4:19 4:18 端的配合,使用compression-webpack-plugin 4:21 filename:'js/chunk-[contenthash].js', path:'/home', 4:22 开发环境的时候我们需要能精准定位错误代码 由于启动项目和打包项目都需要加速,所以配 3、用户体验优化 //qzip 置在webpack.base.js component:login 体积 (1)CSS代码压缩 exclude:/node_modules/, 4G 缓存资源,提高二次构建的速度,使用方法是 webpack.prod.js path:'/login', 开启Gzip后,大大提高用户的页面加载速度, algorithm:'gzip', JS代码压缩使用terser-webpack-plugin,实现 多进程打包,可以大大提高构建的速度,使用 少用户的http网络请求次数,提高用户的体 码都会被打包到一个js文件里,单个js文件体 只用于开发中,所以配置在webpack.dev.js 时,所以只需要在webpack.prod.js中配置