如何优化 vue 项目

Vue 项目优化

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

1.拆分项目模块

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

2.按需加载

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

3.提取公共代码

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

4.webppack 辅助插件推荐

一、拆分模块

按软件工程项目拆分文件

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

如：

assets				//静态文件
components			//公共组件
plugins				//插件
router				//路由
......
......

拆分 css

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

在每个文件增加模块

<style scoped>......</style>

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

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

例子：

全局样式模块，就是公共样式模块，在 main.js 引入

import style from 'ASSETS/css/style.css'

模块 1 的每个页面引入模块 1 的样式文件

<style scoped src="ASSETS/css/module1.css"></style>

模块 2 的每个页面引入模块 2 的样式文件

<style scoped src="ASSETS/css/module2.css"></style>
</