webpack构建速度优化基本优化完毕，接下来要考虑的是：在线代码质量优化，即如何使用webpack构建高质量代码webpack构建过程：初始化配置parameters->Bindeventhookcallback->逐一确定EntryTraverse->使用loader编译文件->输出文件大纲本次优化构建代码质量的基础技术：reactRouter按需加载；公共代码提取和代码压缩；CDN连接回车；启用gzip压缩；接入treeShaking，剔除无用代码，启用ScopeHoisting（生产环境代码构建）实时查看每次配置后的代码构建状态，使用webpack监控文件避免每次手动构建，启用webpack-jarvis，实时要查看构建分析，npmi-Dwebpack-jarvis。启用监控模式watch:true,watchOptions:{ignored:/node_modules/,//忽略监控文件aggregateTimeout:300,//文件变化后多久发起构建轮询:1000,//每次查询次数第二，越小越好}一、react-router4实现了单页应用的按需加载。按需加载的一般原则：把网站分成小的功能，根据每个功能的相关性分成几类；将每个类别合并成一个chunk，按需加载对应的代码；无法按需加载用户首次进入网站时需要看到的对应功能Chunk；分块代码的加载需要一定的触发时机，即当用户操作或即将操作相应的功能时，然后加载相应的代码（默认情况下，使用react-router按需加载的触发条件是改变路线）。实现条件：使用插件：npmireact-loadable；配合bable插件npmi@babel/plugin-syntax-dynamic-import;Codesample://.bablerc{"plugins":["@babel/plugin-syntax-dynamic-import"]}//samplecodeLoadable({loader:()=>import('./component'),//按需加载组件loading:Loading,//组件加载的过程加载、错误等delay:300//延迟加载避免闪烁加载问题});//自定义加载组件//接受三个props，其中pastDelay：等待时触发；timedOut：超时超过延迟时触发；error：出错时触发，默认200msconstLoading=({pastDelay,timedOut,error})=>{if(pastDelay){return}elseif(timedOut){return}elseif(error){return错误！
;}返回空值；}；2。提取公共代码webpack.optimizationoptimization:{splitChunks:{chunks:"all",cacheGroups:{vendors:{test:/node_modules/,name:'vendors',minSize:0,minChunks:1,chunks:'initial',priority:2//这个配置项是设置处理的优先级，值越大优先级越高},commons:{name:"comomns",test:resolve("src/components"),//是自定义expansionrulesminChunks:2,//最小共享次数minSize:0,//提取的最小代码有多大priority:1,//该配置项是设置处理的优先级，值越大，优先级越高}}}3.压缩文件js\css使用npmi-Dwebpack-parallel-uglify-plugin开启多线程并行压缩JSoptimization:{minimizer:[newParallelUglifyPlugin({cacheDir:'.cache/',//缓存压缩，默认不缓存，设置存储位置开启测试：/.js$/,//匹配需要压缩的文件，默认为/.js$//同Loader配置//include:[],使用regularpattern选择需要压缩的文件同Loader配置//exclude:[],使用regularpattern去除不需要压缩的文件和Loader配置一样//workerCount:2,启动几个子进程并发压缩//sourceMap:false,是否输出sourceMap,开启会导致压缩变慢//uglifyJS:{},used压缩ES6代码不能与uglifyJS同时使用uglifyJS:{//CompressES5Codeoutput:{//是否输出更具可读性的代码，即会保留空格和制表符，默认是输出，在为了达到更好的压缩效果，可以设置为falsebeautify:false,//是否保留代码中的注释，默认保留。为了达到更好的压缩效果，可以设置为falsecomments:false},compress:{//UglifyJS删除无用代码时是否输出警告信息，默认为输出警告:false,//是否删除代码中的所有console语句，默认不删除，开启后，所有console语句都会被删除drop_console:true,//是否嵌入已定义但只使用一次的变量，如varx=1;y=x，转换为y=1，默认为无collapse_vars:true,//提取多次出现但未定义的静态值作为变量引用reduce_vars:true}},}),]},使用插件提取压缩css:optimize-css-assets-webpack-plugin,mini-css-extract-pluginusageexample://extractcsstoaseparatefileconstMiniCssExtractPlugin=require("mini-css-extract-plugin");//optimizeCssPluginCSS文件压缩插件constoptimizeCssPlugin=require('optimize-css-assets-webpack-plugin');constextractSCSS=newMiniCssExtractPlugin({filename:'css/[name].[contenthash:8].css',chunkFilename:'css/[name]_[contenthash:8].css',fallback:'style-loader'});...插件:[newoptimizeCssPlugin({assetNameRegExp:/\.css$/g,cssProcessor:require('cssnano'),cssProcessorOptions:{discardComments:{removeAll:true}},canPrint:true}),]webpack配置访问CDNCDN网站访问CDN，需要将网页的静态资源上传到CDN服务器，使用CDN地址访问；使用CDN可以解决资源并行下载的限制，处理同域名静态资源cookie的携带问题；CDN缓存和回源需要合理设置静态资源的hash访问CDN会引入多个域名，增加域名解析时间，预解析域名webpack实现获取output.publicPath并设置JavaScript地址css-loader.publicPath设置CSS导入资源地址WebPlugin.stylePublicPath设置Css文件地址//JavaScriptoutput:{publicPath:'//js.cdn.com/js/',path:path.join(__dirname,'../docs/dist'),//打包文件的存放位置//使用`chunkhash`为输出的JavaScript文件名加上Hash值（chunkhash：根据模块内容变化；hash：根据每次构建随机）filename:"js/[name].[chunkhash:8].js",chunkFilename:"js/[name]-[id].[chunkhash:8].js",},使用插件启用gzip压缩：npmi-Dcompression-webpack插件；webpack配置constCompressionPlugin=require("compression-webpack-plugin");plugins:[newCompressionPlugin({filename:'[path].gz[query]',//目标资源名[file]将替换为原来的resource.[path]会替换成原来的资源路径，[query]会替换成原来的查询字符串algorithm:'gzip',//algorithmtest:/\.(js|css)$/,//Compressjsandcssthreshold:10240,//只处理大于这个值的资源。按byteminRatio:0.8计算//只有压缩率小于这个值的资源才会被处理})]BackgroundisenabledusingkoaconststaticCache=require('koa-static-cache');importconfigfrom'./configs';constapp=newKoa();app.use(staticCache(path.resolve(__dirname,"../dist"),{maxAge:7*24*60*60,gzip:true,//启用动态:true,}))访问treeShaking去除无用代码TreeShaking可以用来寻找有用的代码，去除JavaScript中无用的死代码；但是依赖ES6静态花模块语法import\exportwebpackaccess的导入导出修改.babelrc保留ES6模块语句。注意新版本的babel-preset-env预设了babel-preset-es2015。Babel推荐使用babel-preset-env而不是babel-preset-es2015，继续使用babel-preset-es2015会发出警告信息。{"presets":[["env",{"modules":false}]],"plugins":["syntax-dynamic-import"]}webpack--display-used-exportsrunbuildwith--display-used-exports可以跟踪TreeShaking的工作；webpack只能正确解析如何去除死代码，需要接入UglifyJs处理去除（配置见上）并开启ScopeHoistionscopehoisting，即scopepromotion；在构建过程中，webpack借助ES6模块化的静态特性，会确定模块的依赖关系，将bundle中的静态依赖提升到最顶层。（所以需要像接入treeShaking一样配置Babel开启ES6模块化）原理：分析模块之间的依赖关系，尽可能将分散的模块合并为一个函数。前提不能造成代码冗余，所以只引用一个模块就可以合并。接入的好处：代码体积减小代码在运行时因为创建函数的作用域少了，内存开销也减少了webpack接入ModuleConcatenationPlugin内置插件constModuleConcatPlugin=require('webpack/lib/optimize/ModuleConcatenationPlugin');plugins:[newModuleConcatPlugin(),//启用scopeHoisting],《积步成行，行万里路》——持续更新中~，喜欢就点赞关注吧！往期经典好文：你不知道的CORS跨域资源共享性能优化---Webpack构建速度优化React组件库封装---Modal使用pm2部署node生产环境
