webpack中的代码分割中的常见⽅法
代码分割是webpack的⼀个重要特性，可以将代码分割成不同的部分（bundle），以便进⾏后续的按需加载和并⾏下载，对提升项⽬性能起着重要的作⽤
⽅法⼀：webpack⼊⼝⽂件配制成多个⽂件
const path = require('path');
//entry也可以是数组，例如entry:['./src/index.js', './src/another-module.js']
//为数组时不会⽣成多个bundle
//此时entry是对象
entry: {
index: './src/index.js',
another: './src/another-module.js'
},
output: {
//[name]是entry的键值，[hash]是打包时候的hash值
filename: '[name].bundle.js',
path: solve(__dirname, 'dist')
}
};
看上去分割成多个bundle，但是会出现以下问题
1. 如果⼊⼝bundle包含多个相同模块（例如index.js和another-module.js都引⼊了 lodash）则会打包两遍
2. 这种⽅法不够灵活，完全依照配置打包，并且不能将核⼼应⽤程序逻辑进⾏动态拆分代码
⚠ ：解决1的问题可以使⽤CommonsChunkPlugin（已在 webpack v4
中移除，类似插件可以采⽤SplitChunksPlugin，）插件来解决重复打包相同⽂件问题
const path = require('path');
entry: {
index: './src/index.js',
another: './src/another-module.js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // bundle 名称
})
]
,
output: {
filename: '[name].bundle.js',
path: solve(__dirname, 'dist')
}
};
此时可以看到打包⽂件中多出common bundle，这个bundle就是抽离出来的公共模块
⽅法⼆：动态导⼊
Webpack 的动态分割主要⽅式是使⽤符合 ECMAScript 提案的 import() 语法。例如import(’./a.js’).then(_module => {})。
import()会返回⼀个Promise对象，意味着这个模块和它的⼦模块都会被分割成⼀个单独的 bundle。
在Vue项⽬中，动态分割是实现按需加载的前提，按需加载需要实现以下要求：
1. 将每个路由对应的组件都打包成⼀个单独的bundle（根据import()已经实现）
2. 当路由被访问的时候才加载该路由对应的 bundle（⽤到 vue ⾥⾯的异步组件特性）
Vue 允许你以⼀个⼯⼚函数的⽅式定义你的组件，这个⼯⼚函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该⼯⼚函数，且会把结果缓存起来供未来重渲染。
Vueponent('async-example', function (resolve, reject) {
setTimeout(function () {
// 向 `resolve` 回调传递组件定义
//resolve返回⼀个fullfilled的Promise，⽽ import() 也是返回 Promise
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
使⽤ import() 后，⼯⼚函数的写法：
Vueponent('async-webpack-example',
// 该 `import` 函数返回⼀个 `Promise` 对象。
() => import('./my-async-component')
lodash有哪些方法)
最后在 vue-router 的路由配置中，我们只需要这么写：
const router = new VueRouter({
routes: [
{ path: '/login', component: () => import('@/views/login'), },
{ path: '/home', component: () => import('@/views/home'), }
]
})
⽅法三：预获取/预加载模块
Webpack官⽅是希望我们使⽤异步的⽅式来进⾏模块的加载的。⽽且异步加载也能提升⾸页加载速度，但是⼜会导致异步加载的那部分代码逻辑迟迟不能执⾏，可能导致⽤户的交互长时间没有响应。
这个时候就需要prefetch或preload了。
在声明 import 时，使⽤下⾯这些内置指令，可以让 webpack 输出"resource hint(资源提⽰)"，来告知浏览器：prefetch(预获取)：将来某些导航下可能需要的资源（指⽰浏览器在空闲时间加载）
preload(预加载)：当前导航下可能需要资源（会在⽗ bundle 加载时，以并⾏⽅式开始加载）
import(/* webpackPrefetch: true */ './path/to/LoginModal.js');
//实际上这样做，Webpack替我们在head内添加了这样⼀⾏：
<link rel="prefetch" as="script" href="0.js">

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。