UI组件按需引入；
-
登录页与其它部分分离——>webpack的多入口功能；
什么是HtmlWebpackPlugin：
- 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
- 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
场景：vue项目打开登录首页时等待时间太久。
vue中普通入口是app，可以再加一个入口login，指向另外一个js文件；
1.修改webpack配置：
// html-webpack-plugin 使用
// 安装 npm install html-webpack-plugin --save
// 默认配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: 'index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
new HtmlWebpackPlugin()
]
}
// 当配置多个入口文件 entry 时， 生成的将都会使用 script 引入
module.exports = {
new HtmlWebpackPlugin({
filename: 'index1.html', // 配置输出文件名和路径
template: './src/index1.html', // 配置文件模板
chunks : ['index1']
}), // Generates default index.html
new HtmlWebpackPlugin({
filename: 'index.html', // 配置输出文件名和路径
template: './src/index.html', // 配置文件模板
chunks : ['index']
})
}
路由的懒加载
使用cdn
打包时，把vue、vuex、vue-router、axios等，换用国内的bootcdn直接引入到根目录的index.html。
在webpack build 下 base.conf.js 设置中添加externals，忽略不需要打包的库。
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
externals:{
'vue':'Vue',
'vue-router':'VueRouter',
'vuex':'Vuex'
},
// 格式为'aaa':'bbb'，其中，aaa表示要引入的资源的名字，bbb表示该模块提供给外部引用的名字，由对应的库自定。例如，vue为Vue，vue-router为VueRouter
