vue單頁面應用使用vue-cli的打包問題

使用vue-cli來搭建vue頁面 能夠查看搭建和配置

vue單頁面應用vue-cli的打包問題

問題1：每一個頁面按需加載，搭建中訪問每一個頁面都會加載一個js，webpack輸出的每一個頁面的js命名都是以數字命名。

解決方案：修改webpack.prod.conf.js文件

chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')

懶加載路由須要這樣

const detail = r => require.ensure([], () =>r(require('@/pages/index/children/detail')), 'detail')

意思是給 chunk 命名，也算是分組，不會生成了no-name的chunk。這樣build能夠生成detail.js。

問題2：打包生成的每一個頁面的js文件都包含通用的vue組件和node_modules代碼，以下圖

解決方案：使用Code Splitting 減小vue生成的文件大小，webpack.prod.conf文件設置

new webpack.optimize.CommonsChunkPlugin({
      async: 'common',
      minChunks: (module, count) => (
        count >= 2
      ),
    })
    
能夠生成一個common文件來放每一個組件的通用部分