学习笔记
module.exports = {
/**
* You will need to set publicPath if you plan to deploy your site under a sub path,
* for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
* then publicPath should be set to "/bar/".
* In most cases please use '/' !!!
* Detail: https://cli.vuejs.org/config/#publicpath
*/
......
productionSourceMap: false,
}
}
2.路由懒加载 使用路由懒加载 可以分路由进行打包 也可以使用路由分组 从而减少 vue主要js的 体积大小
{
path: '/roles',
component: Layout,
redirect: '/role',
name: 'role',
meta: { title: '权限', icon: 'el-icon-s-help', roles: ['/roles'] },
children: [
{
path: '/user',
name: '用户列表',
component: () => import('@/views/jurisdiction/user'), // import 懒加载引入
meta: { title: '用户列表', icon: 'user', roles: ['/user'] }
},
{
path: '/role',
name: '角色列表',
component: () => import('@/views/jurisdiction/role'), // import 懒加载引入
meta: { title: '角色列表', icon: 'role', roles: ['/role'] }
}
]
},
3. 组件懒加载 使用组件懒加载大大减少 当前主包大小
// import 形式
// import HelloWorld from '@/components/HelloWorld'
// import role from '@/components/role'
// import user from '@/components/user'
// import懒加载形式
const HelloWorld = ()=>import("@/components/HelloWorld")
const role = ()=>import("@/components/role")
const user = ()=>import("@/components/user")
4. 配置图片压缩
(1) 先安装依赖：
cnpm install image-webpack-loader --save-dev(2) 在
vue.config.js中module.exports
chainWebpack(config) {
// ============压缩图片 start============
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true })
.end()
// ============压缩图片 end============
}
}
5. 使用cdn加载第三方库
- 在vue.config.js里面写入如下内容
configureWebpack: {
// webpack打包的时候 忽略axios
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios'
}
}
2.在pubilc/index.html中引入外部的axios.js cdn文件
6.代码压缩
安装依赖：
cnpm i -D uglifyjs-webpack-plugin
'use strict'
// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
var plugin = []
plugin.push(
new UglifyJsPlugin({
uglifyOptions: {
//生产环境自动删除console
compress: {
// warnings: false, // 若打包错误，则注释这行
drop_debugger: true,
drop_console: true,
pure_funcs: ['console.log']
}
},
sourceMap: false,
parallel: true
})
)
module.exports = {
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
resolve: {
alias: {
'@': resolve('src')
}
},
plugins: plugin
},
}
7. 公共代码抽离
'use strict'
var optimizations = {}
optimizations = {...optimizations,splitChunks:{
chunks: 'all',
cacheGroups: {
libs: {
name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, // minimum common number
priority: 5,
reuseExistingChunk: true
}
}
}}
module.exports = {
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
resolve: {
alias: {
'@': resolve('src')
}
},
plugins: plugin,
optimization:optimizations
},
}
最后 代码优化 ，组件按需引入 等等都对优化有帮助
发表评论