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文件来放每一个组件的通用部分