vue-cli中路由及组件懒加载、以chunk name命名打包后的js文件、打包文件中不生成.map文件

1、路由及组件懒加载

1）路由懒加载（代码分离打包）

方法1（已经被import()替代）：require.ensure()实现

import Vue from "vue";
import Router from "vue-router";
const Index = r => require.ensure([], () => r(require('@/pages/index')), 'index'); //最后‘index’参数为chunk name，相同的chunk name会被打包到同一个异步模块中
const PopupDemo = r => require.ensure([], () => r(require('@/pages/demos/popupDemo')), 'popupDemo');
const ToastDemo = r => require.ensure([], () => r(require('@/pages/demos/ToastDemo')), 'ToastDemo');
const BgImage = r => require.ensure([], () => r(require('@/pages/demos/bgImage/bgImage')), 'bgImage');

方法2：import()实现

一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

import Vue from "vue";
import Router from "vue-router";
const Index = () => import(/* webpackChunkName: "index" */ "@/pages/index");
const PopupDemo = () => import(/* webpackChunkName: "popupDemo" */ "@/pages/demos/popupDemo");
const ToastDemo = () => import(/* webpackChunkName: "ToastDemo" */ "@/pages/demos/ToastDemo");
const BgImage = () => import(/* webpackChunkName: "bgImage" */ "@/pages/demos/bgImage/bgImage");

2）组件懒加载

const Popup = () => import("@/components/popup");

2、以chunk name命名打包后的js文件

在build/webpack.prod.conf.js中将chunkFilename: utils.assetsPath('js/[id].[chunkhash:5].js')中的id改为name
原本为

1579418960(1).jpg

1579419208(1).jpg

更改后的代码：

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash:5].js'),
    chunkFilename: utils.assetsPath('js/[name].[chunkhash:5].js') //将id改为name
  },

1579419376(1).jpg

3、打包文件中不生成.map文件

config/index.js中build下的productionSourceMap设置为false，则打包后的js文件中不生成map文件

productionSourceMap: false,