记一次项目优化

• Webpack方面

  • 减少代码包大小，提高安全性。在config/index.js文件内，修改productionSourceMap: false。表示打包后不要map文件，map文件的作用是如果运行错误会出现报错信息，而改成false，可以对报错信息屏蔽。

  • 开启gzip压缩。在config/index.js文件内，设置productionGzip: true, productionGzipExtensions: ['js', 'css','svg']。 gzip(GNU- ZIP)是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用户浏览页面的时候速度会快得多。gzip的压缩页面需要浏览器和服务器双方都支持，实际上就是服务器端压缩，传到浏览器后浏览器解压并解析。

    //同时在build/webpack.prod.conf.js如以下设置。当然，如果没compression-webpack-plugin要先install。
    const CompressionWebpackPlugin = require('compression-webpack-plugin');
    plugins.push(
        new CompressionWebpackPlugin({
            asset: '[path].gz[query]',// 目标文件名
            algorithm: 'gzip',// 使用gzip压缩
            test: new RegExp(
                '\\.(js|css)$' // 压缩 js 与 css
            ),
            threshold: 10240,// 资源文件大于10240B=10kB时会被压缩
            minRatio: 0.8 // 最小压缩比达到0.8时才会被压缩
        })
    )
    

  • 兼容IE。import 'babel-polyfill对IE浏览器做兼容处理，让IE8或以下浏览器支持ES6 Promise语法。

    //安装
    npm install --save-dev babel-polyfill
    
    //在webpack.base.conf.js中
    import("babel-polyfill");
    
    //使用babel-polyfill
    modules.exports = {
    　　　　　　entry: {
    　　　　　　　　app: ["babel-polyfill", ''./src/main.js"]
    　　　　　　}
    　　　　}
    

  • UI框架按需引入。减少文件体积。

    //借助插件
    npm install babel-plugin-import --save-dev
    
    //在文件 .babelrc 中配置：
    {
      "plugins": [["import", {
        "libraryName": "view-design",
        "libraryDirectory": "src/components"
      }]]
    }
    
    //在main.js中还需这样：
    import 'view-design/dist/styles/iview.css';
    
    //在组件中
    import { Button, Table } from 'view-design';
    Vue.component('Button', Button);
    Vue.component('Table', Table);
    

• 代码方面

  • 抽离公共CSS文件。
  • 整合外部函数，全部放入一个JS文件中，并通过export暴露出来。
  • 利用懒加载。一次性不要加载全部的页面。

• HTTP方面

  • 首页一次性不要请求太多东西，有些数据请求可以通过触发事件来执行。

  • 采用CDN。 内容分发网络的本质仍然是一个缓存，而且将数据缓存在离用户最近的地方，使用户以最快的速度获取数据，即所谓网络访问的第一跳。 由于CDN部署在网络运营商的机房，这些机房又是终端用户网络的服务提供商，因此用户请求路由的第一条就到达了CDN服务器，当CDN中存在浏览器请求的资源时，从CDN直接返回给浏览器，最短路径返回响应，加快用户访问速度，减少数据中心负载压力。 CDN能够缓存的一般是静态资源，如图片，文件，CSS，script脚本，静态网页等，但是这些文件访问频率很高，将其缓存在CDN可以极大改善网页的打开速度。 用<script>来代替 npm install 。减少文件体积。

    //使用cdn在index.html中引入
    <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
     <script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
     <script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
     <script src="//cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
     <script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script>
     <script src="https://cdn.bootcss.com/crypto-js/3.1.9/crypto-js.min.js"></script>
    
    //修改build/webpack.base.conf.js文件，externals外部扩展，通过这种方式引入依赖库，不需要webpack处理。
    module.exports = {
     ...
     externals: {
     'vue': 'Vue', // 右侧vue是我们自己引入时候要用的，左侧是开发依赖库的主人定义的不能修改
     'vue-router': 'VueRouter',
     'vuex': 'Vuex',
     'axios': 'axios',
     'mint-ui': 'MINT',
     'crypto-js': 'CryptoJS'
     }
     ...
    }
    
    //如果项目一开始是用npm 的，那么需要把诸如 import xx from 'vue' 这种的注释掉。