足各路

路由懒加载：当路由被访问时才加载对应的路由文件当打包构建项目时，JavaScript包会变得非常大，影响页面加载，如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。具体步骤：1 安装 @babel/plugin-syntax-dynamic-import打开Vue可视化面板，点击依赖->安装依赖->开发依赖->搜索@babel/plugin-syntax-dynamic-import点击安装。2.在babel...

默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件(js/chunk-vendors.******.js)中，从而导致打包后单文件体积过大的问题。一、如何解决上述问题我们可以通过webpack的externals节点，来配置并加载外部的CDN资源，凡是声明在externals中的第三方依赖包，最终都不会被打包。通过排除这些包减小js/chunk-vendors.******.js文件体积。原理：打包期间，webpack会先检查externals 中是否声明第三方依赖包.

默认情况下，vue项目的开发模式和发布模式，共用同一个打包的入口文件(即src/main.js)，但是开发阶段和上线阶段代码往往会有细微的差别。一、为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件：发开模式的入口文件为：src/main-dev.js发布模式的入口文件为：src/main-prod.js默认情况下，vue-cli3.0生成的项目，隐藏了webpack配置项，如果我们要配置webpack,需要在项目根目录中创建vue.config.js文件来配置.

开发环境的首页和发布环境的首页展示内容的形式有所不同如开发环境中使用的是import加载第三方包，而发布环境则是使用CDN，那么首页也需根据环境不同来进行不同的实现我们可以通过插件的方式来定制首页内容，打开vue.config.js，编写代码如下：module.exports = { chainWebpack:config=>{ // 开发阶段 config.when(process.env.NODE_ENV === 'production',con..

postcss-pxtorem是一款基于PostCSS插件，用于将像素单位生成rem单位。这款插件能够让开发人员直接按照设计图的尺寸开发，并且能自动将像素单位编译转换成rem。前端开发还原设计稿的重要性毋庸置疑，目前应用的单位最多还是rem，然而每次在制作过程中需要自己计算rem值，非常不便。接下来介绍一下postcss-pxtorem的使用。一、postcss-pxtorem 配置步骤1. 安装postcss-pxtorem依赖cnpm install postcss-pxtorem --s.

Autoprefixer是一款基于PostCSS插件，用于解析CSS并使用Can I Use中的值向CSS规则添加供应商前缀 。它是 Google 推荐的，并在Twitter和阿里巴巴中使用。可以实现css3代码自动补全，也可以运用到sass、less中前端开发中，为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀，这些属性多且难记。当然，我们可以手动添加，这样会使开发变得枯燥无味，且容易出错、遗漏，可能会增加不必要的调试。这样既浪费时间，又在无形中给自己添加了很多没必要的工作量。Au.

Gzip压缩——减少文件大小有两个明显的好处，一是可以减少存储空间，二是通过网络传输文件时，可以减少传输的时间。一、打开控制台Chrome浏览器F12打开控制台，进入调试界面二、在表头单击鼠标右键如下图：勾选Content-Encoding后，在表头会多出Content-Encoding这一列，用于判断是否开启Gzip三、未开启Gzip如未开启Gzip，Content-Encoding是空值。如下图：四、已开启Gzip如已开启Gzip，Content-Encoding会显示gzip.

生成打包报告命令行形式生成打包报告vue-cli-service build --report通过vue-cli的命令选项可以生成打包报告--report选项可以生成report.html 以帮助分析报告内在vue控制台生成打包报告点击任务=>build=>运行运行完毕, 点击右侧分析，控制台面板查看报告通过控制台和分析面板，可以方便的看到项目中存在的问题...

插件 babel-plugin-transform-remove-console安装依赖npm install babel-plugin-transform-remove-console --save-dev在babel.config.js进行配置关键代码// 这是项目发布阶段需要用到的 bable 插件const prodPlugins = []if (process.env.NODE_ENV === 'production') { prodPlugins.push('trans.

NProgress安装依赖npm install --save nprogress在main.js中导入 js、css在main.js拦截器中配置, 展示/隐藏进度条关键代码// 导入进度条NProgess 的对应的js、cssimport NProgress from 'nprogress'import 'nprogress/nprogress.css'// 添加 request 请求拦截器 - 展示进度条 NProgress.start()axios.int.