• 11选5走势图分析技巧 2019-09-30
  • 北京11选5胆拖计算器 2019-09-24
  • 11选5组选前三技巧 2019-09-23
  • 11选5摇奖模拟器 2019-09-16
  • 微信上广东11选5正规吗 2019-09-15
  • 11选5胆拖玩法对照表 2019-09-14
  • 体彩11选5前三组多少钱 2019-09-13
  • 11选5任选7软件 2019-09-12
  • 黑龙江新11选5开奖 2019-09-11
  • 广东11选5购彩网站 2019-09-10
  • 11选5拖计算器 2019-09-09
  • 北京体彩11选5开奖结果查询 2019-09-08
  • 11选5任6技巧集锦 2019-09-07
  • 福建11选5开奖结果112期 2019-09-06
  • 河北11选5遗漏数据 2019-09-05
  • 景安微信
    右侧QQ联系不上,可以加我微信
    您好,欢迎来到景安网络!
    加盟景安
    主页 >服务器教程 >【实战分享】Webpack构建代码质量压缩

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


    来源:景安网络发表日期:2019-03-26浏览次数:Tags:Webpack
    景安网络专业的数据中心服务商,长期提供数据中心托管服务,私有云,互联网解决方案,互联网增值服务。针对工信委大力实施“万企业上云”计划,景安以我所能,为你而+,推出上云特惠,核心云计算产品降幅达50%!!也欢迎来聊右侧qq
     
    •  Webpack构建流程:初始化配置参数 -> 绑定事件钩子回调 -> 确定Entry逐一遍历 -> 使用loader编译文件 -> 输出文件。今天小编为大家分享Webpack构建代码质量压缩。
    •  
    • Webpack

    澳门国际赌场 www.qilebang.com 先列个提纲

    •  本次优化构建代码质量基本技术:
    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.  ], 
    0(好文)
    0(太水)
    版权声明:部分文章源于网络,如侵权请联系我们删除
    买购快云Plus,云服务器折上折

    专题页