VUE腳手架優化

一、

首先咱們看看經過vuejs腳手架工具生成項目配置文件config/index.js文件，經過看配置咱們能夠看到這樣一項配置，

productionSourceMap: true

這個配置的做用用因而否生成source map文件。當配置爲true時，在打包的過程當中會生成source map文件，從而幫助調試代碼。可是在咱們發佈代碼的時候是已經調試好的代碼，因此生成source map意義不大，因而咱們將此處改成false。

 

productionSourceMap: false,

 

二、

下面咱們來看看怎麼對圖片進行優化。經過webpack構建的項目，咱們在頁面中之因此可以正確的引用到圖片，這一切都要依託於webpack中的loader，經過查看build下的webpack.base.conf.js文件咱們能夠看到裏面配置了各類各樣的loader，其中有一個url-loader，這個是咱們關心的重點。先看一下優化配置部分
 

默認配置：

{
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
                }
}
 

修改後的配置：

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: ['url-loader?limit=10000&name='+utils.assetsPath('img/[name].[hash:7].[ext]'),
        'image-webpack-loader'
        ]
}
 

經過修改後的配置和默認配置對比，咱們發現修改後的url-loader少了options配置且loader的值爲一個數組，而將本來配置在options中的參數以咱們常見的url參數的方式配置到了url-loader後面，這個地方其實是一樣的效果。在loader中還有一個image-webpack-loader配置，這個loader就是用於圖片優化的核心，用於壓縮圖片大小。這個地方還有個注意點就是數組中loader的順序，即最開始的圖片處理是由url-loader先處理仍是image-webpack-loader處理？url-loader用於將引用的圖片正確的引用，而image-webpack-loader用於壓縮圖片大小，咱們設想的是先壓縮圖片大小，而後再引用。因此配置順序是url-loader在前，image-webpack-loader在後，由於配置在後面的loader先處理，再交由配置在當前處理的loader以前的loader處理。 

 

三、

vue-cli npm run build 命令打包時默認會把 dependencies 中的依賴統一打包，這就致使打包後的 vendor.js 文件過大，從而使得首次啓動時下載 vendor.js 緩慢 

解決方案：像vue、axios、element-ui、iView 這些引入之後基本不會再進行修改的依賴能夠經過cdn引入(固然前提是能夠接入外網，並且網速不錯)，沒必要要打包到 vendor.js 中。具體寫法以下：

 

<!-- 先引入 Vue -->
<!--開發環境-->
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
<!--生產環境-->
<!--<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>-->
<!-- 引入axios -->
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!-- 若是使用element-ui  則引入element-ui， 沒找到index.min.js-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/index.js"></script>
<!-- 若是使用iView  則引入iView-->
<script type="text/javascript" src="https://cdn.bootcss.com/iview/3.1.4/iview.min.js"></script>
<!-- 兩個UI框架能夠同時添加，衝突覆蓋不多-->

 

在項目 根目錄 build/webpack.base.config.js 中 module.exports 內添加 externals

 

externals: {
    'vue': 'Vue', 
    'axios':'axios',
    'element': 'ELEMENT'
},

 

四、路由組件進行懶加載 

{
    path: "/addGroup", name: "addGroup", component:resolve=>require(["@/views/addGroup"],resolve) }

五、對項目代碼中的JS/CSS/SVG(*.ico)文件進行gzip壓縮

經過 npm install --save-dev compression-webpack-plugin

對於svg，ico文件以及bmp文件壓縮效果達到50%，在productionGzipExtensions: ['js', 'css','svg']設置須要進行壓縮的什麼格式的文件

 

// https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true,
    productionGzipExtensions: ['js', 'css','svg'],

View Code

 

六、骨架屏加載