Vue-cli项目打包优化

不知名小Bug
775 阅读3分钟 
断更了差不多快一个星期了，忙着写项目没得时间更新，今天刚好做了项目上线前的打包优化，
那就来聊聊项目上线前要做些什么吧。（也不知道写些什么了，想到什么写什么了）

一、采用路由懒加载

以函数的形式动态引入，可以把各自的路由文件分别打包，只有在解析给定的路由时，才会下载路由组件。

二、element-ui 组件按需加载

官网相关文档

1.在 vue-cli3 项目中，如果没有 babel.config.js，则需要安装 Babel

npm install @babel/core @babel/preset-env

2.按照官网文档安装

npm install babel-plugin-component -D

3.babel.config.js 文件中改为：

module.exports ={
  "presets": ['@vue/app',["@babel/preset-env"]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

**4.新建一个按需导入 element-ui 的文件，elComponentImport.js ** 按需引入的 element-ui 组件

import { 
    Button, Select, Input, Form, Dialog, 
    DatePicker, Radio, Option, Checkbox, Table, 
    Tree, Card,  FormItem, Dropdown, Menu, 
    MenuItem, MenuItemGroup, Badge, Switch, DropdownMenu, 
    DropdownItem, Submenu, RadioGroup, CheckboxGroup, TableColumn, 
    Loading, Pagination, MessageBox, Tooltip, Tag, 
    Upload, Transfer } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
export default Vue => {
    Vue.prototype.$ELEMENT = { size: 'small'};
    Vue.use(Button)
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(Input);
    Vue.use(Form);
    Vue.use(FormItem)
    Vue.use(Dialog)
    Vue.use(DatePicker)
    Vue.use(Radio)
    Vue.use(RadioGroup)
    Vue.use(Checkbox)
    Vue.use(CheckboxGroup)
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(Tree)
    Vue.use(Card)
    Vue.use(Menu)
    Vue.use(Submenu)
    Vue.use(MenuItem)
    Vue.use(MenuItemGroup)
    Vue.use(Dropdown)
    Vue.use(DropdownMenu)
    Vue.use(DropdownItem)
    Vue.use(Badge)
    Vue.use(Switch)
    Vue.use(Loading)
    Vue.use(Loading.directive)
    Vue.use(Pagination)
    Vue.use(Tooltip)
    Vue.use(Tag)
    Vue.use(Upload)
    Vue.use(Transfer)
    Vue.prototype.$loading = Loading.service
    Vue.prototype.$alert = MessageBox.alert
    Vue.prototype.$confirm = MessageBox.confirm
}

5.删除 main.js 中的

import ElmentUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElmentUI,{size:'small'});

6.添加引入按需导入的文件并注册

import eleme from "./components/elComponentImport.js";
Vue.use(eleme);

三、公用代码提取，使用 CDN 加载--vue,vuex,vue-router,axios

对于vue, vuex, vue-router，axios等，可以利用wenpack的externals参数来配置，然后在 index.html 中添加引用即可，打包之后可以在浏览器中看到 vue.js 这些资源首次加载会是从 cdn 下载。

四、使用 CDN 加载资源–echarts,xlsx

为了彻底在生产环境的项目中去掉 echarts 和 xlsx 打包，则需要做以下改变：

<script src="https://cdn.bootcss.com/echarts/4.5.0/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/xlsx/0.14.5/xlsx.min.js"></script>

并且暴露出 echarts 和 xlsx 的全局变量：

五、不拆分 CSS

vue-cli3 中默认会开启一个 css 分离插件，ExtractTextPlugin，这个插件的作用是：使每个模块的 css 文件都会分离出来，这样会导致打包很多小的 css 文件，不仅不利于网页的加载，大量的时间耗费在 http 请求上。而且相互依赖的 css 会造成网页在解析的过程中不断的触发重绘，这将对性能造成极大的影响。为了避免此现象，可以在 vue.config.js 中关闭这个插件：把 extract 设置为 false 之后，打包出来的文件中直接就没有 css 文件夹，打包在了 js 文件当中。extract 为 true 时，将 css 单独剥离出到一个文件夹。当然，首屏加载文件数减少，但体积会变大，最终测下来的首屏加载速度没有太大差别。(是否要css拆分就见仁见智，具体项目具体分析吧。我过去工作中做vue一般是不建议拆分。)

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

关于项目上线打包前的优化就聊到这了，等我什么时候想起来其他的再补充，或者各位大佬反馈提供一下更好！！！

avatar
文章
阅读
粉丝