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
打包后的js文件为
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,
