保险项目文档

# 打包优化

VueCli3本身做了一定的打包优化，本项目也做了一定的优化。

# 生产环境关闭 productionSourceMap

VueCli3项目productionSourceMap是默认开启的，在正式环境不需要开启这个选项。

productionSourceMap: false
1

# CSS优化

开发环境使用sourceMap可以方便调试，但是开启这个会影响构建的性能，因此我们只在开发环境打开

 css: {
    sourceMap: process.env.NODE_ENV === 'development' // 正式上不开启sourceMap
  }
1
2
3

# 抽离基础库代码到CDN

项目中将不会变动的vue相关库代码抽离为CDN链接，会提升首屏的启动速度，减少白屏，这其中包括：

  • Vue核心库
  • Vuex库
  • Vue-Router
  • Axios
  • Element_UI

首先需要将vue.config.js chainWebpack 代码中添加：

    chainWebpack: config => {
        config.externals({ // 使用外部js
            axios: 'axios',
            vue: 'Vue',
            vuex: 'Vuex',
            'vue-router': 'VueRouter',
            'element-ui': '"element-ui"'
        });
    }
1
2
3
4
5
6
7
8
9

然后在/public/index.html文件内将脚本引入：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>保瓶儿管理系统</title>
  </head>
  <body>
    <noscript>
      <strong>请允许js运行</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://pic.xwgbx.com/js/axios/0.18.0/axios.min.js"></script>
    <script src="https://pic.xwgbx.com/js/vue/2.6.10/vue.runtime.min.js"></script>
    <script src="https://pic.xwgbx.com/js/vue-router/3.0.2/vue-router.min.js"></script>
    <script src="https://pic.xwgbx.com/js/vuex/3.1.0/vuex.min.js"></script>
    <script src="https://pic.xwgbx.com/js/element-ui/2.6.1/index.js"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 开启 --morden 编译模式

Vue CLI3 提供modern选项，构建两套代码，一套现代浏览器原生支持的 ES2015 代码，不含profill，体积更小，执行更快，含profill的版本来兼容老浏览器。

完全符合morden模式的浏览器列表:

Chrome >= 49
FireFox >= 45
Edge >= 13
Safari >= 10   #Safari 10 要加上特定的列表
1
2
3
4

开启此模式，会独立编译两套代码，编译时间会加长，请酌情开启。

← 规范 →