|
手艺频道
|
51CTO旗下网站
|
|
挪动端

机能优化篇---Webpack构建代码质量紧缩

Webpack构建速度优化根基优化终了,接下来思索的就是:线上代码质量的优化,即如何运用webpack构建出下质量的代码。

作者:keywords泉源:|2019-03-26 10:02

  •  Webpack构建速度优化根基优化终了,接下来思索的就是:线上代码质量的优化,即如何运用webpack构建出下质量的代码
  •  Webpack构建流程:初始化设置参数 -> 绑定事宜钩子回调 -> 肯定Entry一一遍历 -> 运用loader编译文件 -> 输出文件

提要

  •  本次优化构建代码质量根基手艺:
  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,  //每秒讯问次数,越小越好  

一、react-router4实现按需加载

  •  单页运用按需加载一样平常原则:

        1.将网站划分红一个个小功用,在根据每一个功用的相干度将他们分红几个类;

        2.将出一个类兼并成一个chunk,按需加载对应的代码;

        3.弗成将用户初次进入网站时需求看到画面的对应功用Chunk按需加载;

  •  被支解进来的代码的加载需求肯定的触发机遇,即当用户操纵了大概行将操纵对应功用时再去加载对应的代码(默许运用react-router按需加载的触发前提是路由的转变)
  •  实现前提:

        1.运用插件:npm i react-loadable;

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

  •  代码示例: 
  1. // .bablerc  
  2.  
  3.   "plugins": ["@babel/plugin-syntax-dynamic-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.     }  

三、压缩文件js\css

  •  运用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 = 1y = 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.     }),  

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.     })  
  •  背景开启运用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.     dynamic: true,  
  8. })) 

接入treeShaking,剔除无用代码

  •  Tree Shaking能够用来找出有效代码,去除JavaScript顶用不上的死代码;然则它依赖于ES6静态花模块语法import\export的导入和导出
  •  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-dynamic-import"]  

  •  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.  ], 
【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0
  •     
分享:
人人皆在看
猜您喜好
金沙4399js网站
4766.com

编纂推荐

存眷
头条
热点
头条
热点
24H热文
一周话题
本月最赞

定阅专栏

优化运维流水线奥门金沙游戏9159
共3章 | youerning

198人定阅进修

IT人的职场心法
共22章 | Bear_Boss

79人定阅进修

运维标配手艺
共15章 | one叶孤舟

199人定阅进修

视频课程

讲师:13526人进修过

讲师:389人进修过

讲师:377人进修过

CTO品牌

最新专题

精选博文
论坛热帖
下载排行

读 书

本书周全体系天归纳综合了计算机网络的基本理论,具体论述了OSI模子取网络和谈、网络计划取综合布线、对等网络取服务器/客户端网络、Intranet服...
金沙4399js网站

定阅51CTO邮刊

51CTO服务号

51CTO播客

4066h.com