加入收藏 | 设为首页 | 会员中心 | 我要投稿 东莞站长网 (https://www.0769zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

性能优化篇---Webpack构建代码质量压缩

发布时间:2019-03-27 08:06:58 所属栏目:优化 来源:keywords
导读:Webpack构建速度优化基本优化完毕,接下来考虑的就是:线上代码质量的优化,即如何使用webpack构建出高质量的代码 Webpack构建流程:初始化配置参数 - 绑定事件钩子回调 - 确定Entry逐一遍历 - 使用loader编译文件 - 输出文件 提纲 本次优化构建代码质量基

三、压缩文件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.     }),  

(编辑:东莞站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!