前后端分离开发，这几个技巧让页面加载速度提高了 90%

序言

以后用vuecli做了个网志，是两个单网页工程项目，约莫有六个路由器间接npm run build装箱出，有两个1M的非常大js文档

先装载到伺服器上试一试赖草这读取天数好似过了数十年

井字网页足足加载了9s 光读取这个大文档就花了8s这要得做个强化了，没使用者能承受9s的CM3而不停用网页的

操作过程中，我还别忘了把工程项目从vuecli 2.x北迁到了vuecli 3，因此接下去还会如是说许多它在强化上的分野

预测

vuecli 2.x自带了预测工具只要运行npm run build –report

如果是vuecli 3的话，先安装插件

cnpm intall webpack-bundle-analyzer –save-dev

然后在vue.config.js中对webpack进行配置

chainWebpack: (config) => {/* 添加预测工具*/if (process.env.NODE_ENV===production) {if (process.env.npm_config_report) {config.plugin(webpack-bundle-analyzer).use(require().BundleAnalyzerPlugin).end();config.plugins.delete(prefetch)}} }

在运行npm run build –report

会在浏览器打开两个工程项目装箱的情况图，便于直观地比较各个bundle文档的大小

可以看到工程项目中所有的依赖，所有的路由器，都被装箱进了同两个文档中

另外，在浏览器中，也可以通过converge来查看代码的使用状况

红色的是下载了但未使用的部分

路由器懒读取

当装箱构建应用时，JavaScript包会变得非常大，影响网页读取。如果我们能把不同路由器对应的组件分割成不同的代码块，然后当路由器被访问的时候才读取对应组件，这样就更加高效了。

在一开始就下载完所有路由器对应的组件文档，这明显是不合适的，这就像下载两个app了，因此我们就需要使用路由器懒读取

在router.js文档中，原来的静态引用方式

importShowBlogsfrom@/components/ShowBlogsroutes:[ path: Blogs, name: ShowBlogs, component: ShowBlogs ]

改为

routes:[ path: Blogs,name: ShowBlogs,component: () => import(./components/ShowBlogs.vue)

以函数的形式动态引入，这样就可以把各自的路由器文档分别装箱，只有在解析给定的路由时，才会下载路由器组件

井字需要读取的文档变成了橙色的部分，被小弟们分流出去了300k

如果是在vuecli 3中，我们还需要多做一步工作因为vuecli 3默认开启prefetch(预先读取模块)，提前在井字会把这十两个路由器文档，都一口气下载了因此我们要停用这个功能，在vue.config.js中设置参考官网的做法：

设置完毕后，井字就只会读取当前网页路由器的组件了

element-ui按需读取

井字需要读取的依赖包，其中element-ui足足占了568k原本的引进方式引进了整个包：

importElementUIfromelement-uiVue.use(ElementUI)

但实际上我用到的组件只有按钮，分页，表格，输入与警告因此我们要按需引用：

import { Button, Input, Pagination, Table, TableColumn, MessageBox } fromelement–ui;Vue.use(Button)Vue.use(Input)Vue.use(Pagination)Vue.prototype.$alert=MessageBox.alert

注意MessageBox注册方法的区别，并且我们虽然用到了alert，但并不需要引入Alert组件

在.babelrc文档中添加（vue-cli 3要先安装babel-plugin-component)：

plugins: [[“component”,{“libraryName”: “element-ui”,“styleLibraryName”: “theme-chalk”}]]

element-ui小了很多，不过看到这个显眼的table.js后想到，table组件只有后台管理网页用到了，不需要全局注册，因此我们删除main.js中Table和TablColumn的引用，并在后台组件中局部注册

import { Table, TableColumn } from;components: {“el-table”: Table,“el-table-column”: TableColumn },

table就被拆分到了路由器文档中

组件重复装箱

可以看到上图，有两个路由器文档都引用了codemirror.js造成重复下载我们可以在webpack的config文档中，修改CommonsChunkPlugin的配置

minChunks: 3

把3改为2，就会把使用2次及以上的包抽离出，放进公共依赖文档，不过由于首页也有复用的组件，因此首页也会下载这个公共依赖文档

首页下载了黄色和灰色部分拆了半天，又回到原点

当然，我们可以继续折腾CommonsChunkPlugin的配置来解决这个问题但在新版webpack中，CommonsChunkPlugin被自由度更高，更高级的SplitChunksPlugin代替

这也是为什么我要把工程项目北迁到vuecli 3（使用webpack4）默认就做了强化，首页只会下载灰色的部分（235K）

gzip

拆完包之后，我们再用gzip做一下压缩安装compression-webpack-plugin

cnmp i compression-webpack-plugin -D

在vue.congig.js中引入并修改webpack配置

constCompressionPlugin=require(compression-webpack-plugin)configureWebpack: (config) => {if (process.env.NODE_ENV===) {// 为生产环境修改配置…config.mode=return {plugins: [newCompressionPlugin({test: /\.js$|\.html$|\.css/, //匹配文档名threshold: 10240, //对超过10k的数据进行压缩deleteOriginalAssets: false//是否删除原文档})]}}

可以看到200k以上的文档被压缩到了100k以内

在伺服器我们也要做相应的配置如果发送请求的浏览器支持gzip，就发送给它gzip格式的文档我的伺服器是用express框架搭建的只要安装一下compression就能使用

constcompression=require(compression)app.use(compression())

注意，后面这一句，要放在所有其他中间件注册以后

最终效果

井字读取资源198k，读取天数1s，相比原来速率提升了90%

后记：css是否要拆分

vuecli 3和vuecli2.x还有两个区别是vuecli 3会默认开启两个css分立插件 ExtractTextPlugin每两个模块的css文档都会分立出，足足13个css文档，而我们的首页就请求了4个，花费了不少的资源请求时间我们可以在vue.config.js中停用它

css: {// 是否使用css分立插件 ExtractTextPluginextract: false,// 开启 CSS source maps?sourceMap: false,// css预设器配置项loaderOptions: {},// 启用 CSS modules for all css / pre-processor files.modules: false},