uglifyjs

(给 前端食堂 加星标，吃好每一顿) 引言 webpack 的打包优化一直是个老生常谈的话题，常规的无非就分块、拆包、压缩等。 本文以我自己的经验向大家分享如何通过一些分析工具、插件以及 webpack 新版本中的一些新特性来显著提升 webpack 的打包速度和改善包体积，学会分析打包的瓶颈以及问题所在。 本文演示代码，仓库地址:https://github.com/Jack-cool/webpack4(欢迎star啊 ) 速度分析 🏂 webpack 有时候打包很慢，而我们在项目中可能用了很多的 plugin 和 loader ，想知道到底是哪个环节慢，下面这个插件可以计算 plugin 和 loader 的耗时。 yarn add -D speed-measure-webpack-plugin 配置也很简单，把 webpack 配置对象包裹起来即可： const SpeedMeasurePlugin = require ( "speed-measure-webpack-plugin" ); const smp = new SpeedMeasurePlugin(); const webpackConfig = smp.wrap({ plugins : [ new MyPlugin(), new MyOtherPlugin() ] }); 来看下在项目中引入 speed

初级分析：使用webpack内置的stats stats:构建统计信息 package.json中使用stats "scripts": { "build:stats":"webpack --env production --json > stats.json" } 复制代码 指定输出的json对象，输出一个json文件 Node.js 中使用 const webpack = require('webpack') const config = require('./webpack.config.js')('production') webacpk(config, (err, stats) => { if(err) { return console.error(err); } if(stats.hasErrors()) { return console.log(stats.toString("errors-only")) } console.log(stats); }) 复制代码 缺点：颗粒度太粗，看不出问题所在。 速度分析：使用speed-measure-webpack-plugin const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin') const smp = new

文将详细介绍前端性能优化的七大手段，包括减少请求数量、减小资源大小、优化网络连接、优化资源加载、减少重绘回流、使用性能更好的API和构建优化 减少请求数量 【合并】 　　如果不进行文件合并，有如下3个隐患 　　1、文件与文件之间有插入的上行请求，增加了N-1个网络延迟 　　2、受丢包问题影响更严重 　　3、经过代理服务器时可能会被断开 　　但是，文件合并本身也有自己的问题 　　1、首屏渲染问题 　　2、缓存失效问题 　　所以，对于文件合并，有如下改进建议 　　1、公共库合并 　　2、不同页面单独合并 【图片处理】 　　1、雪碧图 　　CSS雪碧图是以前非常流行的技术，把网站上的一些图片整合到一张单独的图片中，可以减少网站的HTTP请求数量，但是当整合图片比较大时，一次加载比较慢。随着字体图片、SVG图片的流行，该技术渐渐退出了历史舞台 　　2、Base64 　　将图片的内容以Base64格式内嵌到HTML中，可以减少HTTP请求数量。但是，由于Base64编码用8位字符表示信息中的6个位，所以编码后大小大约比原始值扩大了 33% 　　3、使用字体图标来代替图片 【减少重定向】 　　尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载，降低了用户体验 　　如果一定要使用重定向

目录 1. 描述 2. uglifyjs-webpack-plugin 2.1 github 2.2 安装 2.3 配置 3. terser-webpack-plugin 2.1 github 2.2 安装 2.3 配置 1. 描述 使用vue-cli编写的插件或库文件，打包的时候如果需要压缩、混淆、去注释，去除debugger、console.log等，可以使用 uglifyjs-webpack-plugin 或者 terser-webpack-plugin，前者不支持es6，打包时可能会报Unexpected token的错误，后者是前者对es6的支持版本。 2. uglifyjs-webpack-plugin 2.1 github https://github.com/webpack-contrib/uglifyjs-webpack-plugin 2.2 安装 npm install uglifyjs-webpack-plugin --save-dev 2.3 配置 在vue.config.js中配置 const UglifyJsPlugin = require ( 'uglifyjs-webpack-plugin' ) // module.exports 中配置，可加参数，详见github文档或百度 configureWebpack : config => { if (

Rollup+Ts构建前端应用 前言 最近接手一个新的需求，纯html模版开发，对于已经习惯前端工程化开发的我来说，再回到 html+css+js 的时代，着实有点苦难，于是利用 Rollup+Ts+Scss 来进行开发。 项目搭建 # 项目初始化 npm init # 安装需要的依赖 yarn add rollup typescript rollup-plugin-postcss rollup-plugin-typescript tslib -D 复制代码 rollup-plugin-typescript 插件依赖 tslib ,需要提前安装好，不然运行的时候会出现找不到 tslib 依赖的错误。 配置tsconfig.json // tsconfig.json { "compilerOptions" : { "outDir" : "es" , "target" : "ESNext" , "declaration" : true , "noImplicitAny" : true , "removeComments" : true , "noUnusedLocals" : true }, "include" : [ "src/**/*" , "./declaration.d.ts" ], "exclude" : [ "node_modules/**/*" ] } 复制代码