全球云服务器

【实战分享】Webpack构建代码质量压缩

发布时间：2022-07-21 05:34:02 作者：evol 阅读量：6998

 

•  Webpack构建流程：初始化配置参数 -> 绑定事件钩子回调 -> 确定Entry逐一遍历 -> 使用loader编译文件 -> 输出文件。今天小编为大家分享Webpack构建代码质量压缩。
•  
• 

先列个提纲

•  本次优化构建代码质量基本技术：

1.  reactRouter按需加载；
2.  公共代码提取，以及代码压缩；
3.  CDN接入；
4.  开启gzip压缩；
5.  接入treeShaking，剔除无用代码
6.  开启Scope Hoisting

•  （生产环境代码构建）为实时查看每次配置后代码构建情况，使用Webpack监听文件避免每次手动build，并且开启webpack-jarvis，实时查看构建分析，npm i -D webpack-jarvis。
•  开启监听模式 

1. watch: true,  
2. watchOptions: {  
3.     ignored: /node_modules/, // 忽略监听文件  
4.     aggregateTimeout: 300,  //文件变动后多久发起构建  
5.     poll: 1000,  //每秒询问次数，越小越好  
6. } 

一、react-router4实现按需加载

•  单页应用按需加载一般原则：

        1.将网站划分成一个个小功能，在按照每个功能的相关度将他们分成几个类；

        2.将没一个类合并成一个chunk，按需加载对应的代码；

        3.不可将用户首次进入网站时需要看到画面的对应功能Chunk按需加载；

•  被分割出去的代码的加载需要一定的触发时机，即当用户操作了或者即将操作对应功能时再去加载对应的代码（默认使用react-router按需加载的触发条件是路由的变化）

•  实现条件：

        1.使用插件：npm i react-loadable;

        2.配合bable插件npm i @babel/plugin-syntax-namic-import;

•  代码示例： 

1. // .bablerc  
2. {  
3.   "plugins": ["@babel/plugin-syntax-namic-import"]  
4. }  
5. // 示例代码  
6. Loadable({  
7.   loader: () => import('./component'), //按需加载组件  
8.   loading: Loading, //处理组件加载的loading、error等  
9.   delay: 300  //延迟加载避免loading的闪烁问题  
10. });  
11. // Loading组件自定义  
12. // 接受三个props，其中pastDelay：等待时触发；timedOut：超时时触发超过delay；error：出错触发默认为200ms  
13. const Loading = ({ pastDelay, timedOut, error }) => {  
14.     if (pastDelay) {  
15.       return <Spin spinning tip="Loadding..." ><div style={{height: 300}} /></Spin>  
16.     } else if (timedOut) {  
17.       return <Spin spinning tip="Taking a long time..." ><div style={{height: 300}} /></Spin>  
18.     } else if (error) {  
19.       return <div>Error!</div>;  
20.     }  
21.     return null;  
22. }; 

二、提取公共代码webpack.optimization

1. optimization: {  
2.     splitChunks: {  
3.       chunks: "all",  
4.       cacheGroups: {  
5.         vendors: {   
6.             test: /node_modules/,  
7.             name: 'vendors',   
8.             minSize: 0,  
9.             minChunks: 1,   
10.             chunks: 'initial',  
11.             priority: 2 // 该配置项是设置处理的优先级，数值越大越优先处理   
12.         },  
13.         commons: {  
14.           name: "comomns",  
15.           test: resolve("src/components"), // 可自定义拓展规则  
16.           minChunks: 2, // 最小共用次数  
17.           minSize:0,   //代码最小多大，进行抽离  
18.           priority: 1, //该配置项是设置处理的优先级，数值越大越优先处理   
19.         }  
20.     }  
21. } 

三、压缩文件jscss

•  使用npm i -D webpack-parallel-uglify-plugin启用多线程并行压缩JS 

1. optimization: {  
2.     minimizer: [  
3.         new ParallelUglifyPlugin({  
4.             cacheDir: '.cache/', //缓存压缩，默认不缓存，设置存放位置开启  
5.             test: /.js$/, //匹配需要压缩的文件，默认为/.js$/和Loader配置一样  
6.             //include: [], 使用正则去选择需要被压缩的文件和Loader配置一样  
7.             //exclude: [], 使用正则去去除不需要被压缩的文件和Loader配置一样  
8.             //workerCount: 2, 开启几个子进程并发执行压缩  
9.             // sourceMap: false, 是否输出source Map，开启会导致压缩变慢  
10.             // uglifyJS: {}, 用于压缩ES6代码不可和uglifyJS同时使用  
11.             uglifyJS:{//压缩ES5代码  
12.                 output: {  
13.                     // 是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，可以设置为false  
14.                     beautify: false,  
15.                     //是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false  
16.                     comments: false  
17.                 },  
18.                 compress: {  
19.                     //是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出  
20.                     warnings: false,  
21.                     //是否删除代码中所有的console语句，默认为不删除，开启后，会删除所有的console语句  
22.                     drop_console: true,  
23.                     //是否内嵌虽然已经定义了，但是只用到一次的变量，比如将 var x = 1; y = x, 转换成 y = 1, 默认为否  
24.                     collapse_vars: true,  
25.                     // 提取出现多次但是没有定义成变量去引用的静态值  
26.                     reduce_vars:true  
27.                 }  
28.             },  
29.         }),  
30.     ]  
31. }, 

•  提取和压缩Css

        1.使用插件：optimize-css-assets-webpack-plugin、mini-css-extract-plugin

        2.使用示例：

1. // 提取css到单独的文件  
2. const MiniCssExtractPlugin = require("mini-css-extract-plugin");  
3. // optimizeCssPlugin CSS文件压缩插件  
4. const optimizeCssPlugin = require('optimize-css-assets-webpack-plugin');  
5. const extractSCSS = new MiniCssExtractPlugin({  
6.     filename: 'css/[name].[contenthash:8].css',  
7.     chunkFilename: 'css/[name]_[contenthash:8].css',  
8.     fallback:'style-loader'  
9. });  
10. ...  
11. ...  
12. plugins: [  
13.     new optimizeCssPlugin({  
14.         assetNameRegExp: /.css$/g,  
15.         cssProcessor: require('cssnano'),  
16.         cssProcessorOptions: { discardComments: { removeAll: true } },  
17.         canPrint: true  
18.     }),  
19. ] 

webpack配置接入CDN

•  CDN
•  网站接入CDN，需要将网页的静态资源上传到CDN服务器，使用CDN地址访问；

1.  使用CDN可以决解资源并行下载限制，处理静态资源Cookie同域名携带等问题；
2.  CDN缓存和回源需要合理的设置静态资源hash
3.  接入CDN会引入多个域名，增加域名解析时间，可进行预解析域名<link rel="dns-prefetch" href="//js.dns.com" />

•  webpack实现接入

1.  output.publicPath设置JavaScript地址
2.  css-loader.publicPath设置CSS导入的资源地址
3.  WebPlugin.stylePublicPath中设置Css文件地址 

1. // JavaScript  
2. output: {  
3.     publicPath: '//js.cdn.com/js/',  
4.     path: path.join(__dirname, '../docs/dist'), // 打包后的文件存放的地方  
5.     // 为输出的JavaScript文件名加上Hash值使用`chunkhash`（chunkhash：根据模块内容变化；hash: 根据每次构建随机）  
6.     filename: "js/[name].[chunkhash:8].js",  
7.     chunkFilename: "js/[name]-[id].[chunkhash:8].js",  
8. }, 

开启gzip压缩

•  使用插件：npm i -D compression-webpack-plugin;
•  webpack配置 

1. const CompressionPlugin = require("compression-webpack-plugin");  
2. plugins: [  
3.     new CompressionPlugin({  
4.         filename: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串  
5.         algorithm: 'gzip',//算法  
6.         test: /.(js|css)$/,    //压缩 js 与 css  
7.         threshold: 10240,//只处理比这个值大的资源。按字节计算  
8.         minRatio: 0.8//只有压缩率比这个值小的资源才会被处理  
9.     })  
10. ] 

•  后台开启使用koa  

1. const staticCache = require('koa-static-cache');  
2. import config from './configs';  
3. const app = new Koa();  
4. app.use(staticCache(path.resolve(__dirname, "../dist"), {  
5.     maxAge: 7 * 24 * 60 * 60,  
6.     gzip: true, //开启  
7.     namic: true,  
8. })) 

接入treeShaking，剔除无用代码

•  Tree Shaking可以用来找出有用代码，去除JavaScript中用不上的死代码；但是它依赖于ES6静态花模块语法importexport的导入和导出
•  webpack接入

1.  修改.babelrc保留ES6模块话语句

•  注意新版本babel-preset-env已经预设babel-preset-es2015,babel推荐使用babel-preset-env取代babel-preset-es2015，并且继续使用babel-preset-es2015会发出警告信息。 

1. {  
2.   "presets": [  
3.     ["env", {  
4.       "modules": false  
5.     }]  
6.   ],  
7.   "plugins": ["syntax-namic-import"]  
8. } 

 

•  webpack --display-used-exports运行构建带上--display-used-exports可追踪到Tree Shaking的工作；
•  Webpack只能正确的分析出如何剔除死代码，需要接入UglifyJs处理剔除（配置见上）

开启Scope Hoistion

•  scope hoisting即作用域提升;
•  在构建过程中，webpack会借助ES6 模块化的静态特性，确定模块的依赖关系，将一个bundle中的静态依赖提升到顶部。（所以需要和接入treeShaking一样配置Babel开启ES6模块化）
•  原理：分析模块间的依赖关系，尽可能的将零散的模块合并到一个函数中去，前提不能造成代码冗余，因此只有被引用了一次的模块才能被合并。
•  接入好处：

        1.代码体积减少

        2.代码在运行时因为创建的函数作用域更少了，内存开销也随之变小

•  webpack接入ModuleConcatenationPlugin内置插件 

1. const ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');  
2. plugins: [  
3.      new ModuleConcatPlugin(), //开启scope Hoisting  
4.  ], 

***本网站图片，文字之类版权申明，因为网站可以由注册用户自行上传图片或文字，本网站无法鉴别所上传图片或文字的知识版权，如果侵犯，请及时通知我们，本网站将在第一时间及时删除。

我要评论

网友评论

---

---

---

常见ftp命令 FTP命令使用详解双硬盘组建Raid0磁盘阵列图文教程用友软件客户端连接不上服务器的解决办法？WebService实例开发、运维不可不看的Linux调测工具如何使用Charles抓取Websocket的消息DNS服务的启动和停止如何用ODBC访问SQL数据库Linux视频教程：用户管理命令useraddWindows Server 2003中如何启动ASP.NET扩展服务IIS中站点主属性配置如何搭建平台【超赞】专为小白整理的adobe xd入门教程小旋风asp服务器怎么使用将基于域名的虚拟主机转换为基于IP的虚拟主机设置DHCP数据库路径快云存储技术服务器集群技术的分类什么是双线托管，比较便宜的双线托管有哪些重庆电信服务器托管注意事项IBM欲出售低端服务器业务是为何意Linux-PAM的工作流程基于域名的虚拟主机配置的两种方法分布式与集群是一回事儿么？大神教你5招加速Python英特尔称服务器业务目前已基本恢复英特尔三季度全球微处理器市场份额达83.7%【划重点】我对TopCoder的一些看法服务器技术之Pcrl语言文件的读写IDC：中国HPC发展迅猛曙光HPC销售额进全球前十强