Vue 项目优化

之前写了一篇解析 vue-cli 脚手架的博客 https://blog.csdn.net/u014168594/article/details/90174169，讲了 vue-cli 构建项目时是如何优化的，最近在优化项目，看看我们还能在项目中做些什么。

1.拆分项目模块

• 按软件工程项目拆分文件
• 拆分 css
• 抽离代码块，使用全局命令

2.按需加载

• 路由按需加载
• echarts
• iview
• vant

3.提取公共代码

• 拆分公共代码
• externals 分离
• Dllplugin 分离

4.webppack 辅助插件推荐

一、拆分模块

按软件工程项目拆分文件

按照软件工程项目，建立公共组件、路由、静态文件等文件夹；在路由按模块拆分文件夹，把同一模块路由写进一个文件等。

如：

拆分 css

可把 css 模块拆分为全局模块和局部模块，这样就无需把所有 css 文件一次性打包，导致文件过大阻塞 js 加载，而是按需加载，利于首屏加载。

在每个文件增加模块

属性详情可看我之前的文章 Vue style 属性 scoped 原理详解

但是为每个页面增加各自的局部样式模块，维护未免过于困难，所以最好的做法，我认为还是应该把某个模块的样式内容集中在一个文件，然后这个模块里的每个页面都引入该样式文件。

例子：

最好记得在 webpack 中设置相对路径，这里 ASSETS 就是直接指向样式文件夹

注意：局部模块一定要用 src 引用而不是 import ，因为无论在什么地方 import 样式文件，最终的结果都会变成全局模块。

抽离代码块，使用全局命令

使用全局变量、函数以及组件，而不是每个页面都 import 一次

全局变量路径 global_val.js：

全局函数路径 api/golbal.js：

main.js

Vue.use() 会自动执行内部的 install 方法，因为是添加在 vue 实例中，所以在整个 vue 项目中都可引用。

二、按需加载

1.路由按需加载

2.echarts

按实际使用情况需要什么组件就引入相应 echarts 组件

echarts组件引入目录

3.iview

在 npm 内引入插件 babel-plugin-import（按需引入插件）

在 .babelrc 文件中设置

在 build/webpack.base.conf.js 中设置：

这样 import 引入 iview 的时候就会自动在 src/components 中查找组件，按需引入。

4.vant

与 iview 相似

三、提取公共代码

拆分公共代码

vue-cli 脚手架之前已经做了拆分公共的基础代码块 node_module

但是如果是按需加载的话，我在 webpack 3.x 里面发现该插件并不会遍历所有入口，导致个别按需加载页面的 node_module 并没有被提取，我们还需要把所有页面的公共代码再进行一次提取。

把从 app.js 入口里面的所有子页面再提取一次，力度 minChunks 由实际情况决定。

externals 分离

main.js：

webpack.base.conf：

最后在 index.html 文件中引入插件（最好存到 cdn 址内）。

注意：如果引入是 import xxx from ‘xxx/src/xx’ 这种有地址形式或者按需引入，则分离失效

Dllplugin 分离

把需要独立打包的第三方库提前打包，由于打包完一次，在无需改动的情况下，以后都不需要再次打包第三方插件。比起 externals ，不仅抽离文件，也加快了打包速度。

使用 Dllplugin 有三步：

（1）新建文件 webpack.dll.config：

执行此文件，会生成 vender.dll.js（打包的文件）和 vendor-manifest.json（文件引入映射）

二、新建命令

运行 npm run dll 执行上一步文件

三、确定已分离的第三方插件

打包时，根据 vendor-manifest.json 文件的映射关系确定已缓存的插件不被打包

在 webpack.base.conf.js 中：

最后记得在 html 文件中加上对 vendor.dll.js 的引用

四、webppack 辅助插件推荐

1.webpack-bundle-analyzer：用于分析打包后文件的工具