1、搭建vue-cli 脚手架,查看原文章
https://blog.csdn.net/weixin_39854011/article/details/112432873
2、配置webpack,借助一些插件来优化:
有人疑惑package.json为什么要分devdependencies 和 dependencies?
dependencies中的 npm包在线上环境使用,而其余的如各种loader,babel全家桶及各种webpack的插件等,其实在上线之前已经发挥出他的作用,所以不需要被打到包中上线。
大家都知道在上线之前都会先进行jenkins打包,然后再发布到线上环境;所以这里有2步,一步是进行打包,一步是部署到线上。
那打包的时候大概会是这两个过程先执行npm install下载所以的依赖,然后进行npm run build, 这时候webpack就会用到刚才瞎子个各种依赖进行打包,得到我们要dist包,这时候那些依赖已经发挥完作用了,所以不需要打包到线上。
接下来我们说下如何优化:
1、首先配置开启压缩:vue.config.js
const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启压缩
plugins.push(
//压缩
new CompressionWebpackPlugin({
algorithm: "gzip",
test: /\.(js|css)$/, // 匹配文件名
threshold: 10000, // 对超过10k的数据压缩
deleteOriginalAssets: false, // 不删除源文件
minRatio: 0.8, // 压缩比
})
);
2、进行cdn引入vue、echarts等文件,减小vender.js 的体积。
vue.config.js
const externals = {
"vue": "Vue",
"vue-router": "VueRouter",
"vuex": "Vuex",
"axios": "axios",
"vant": "vant"
};
config.externals = externals;
index.html,将这些文件下载下来,放到lib目录下。
<script src="./lib/vue.min.js"></script>
<script src="./lib/vue-router.min.js"></script>
<script src="./lib/axios.min.js"></script>
<script src="./lib/vuex.min.js"></script>
3、预渲染:vue.confi.js
预渲染依赖一个prerender-spa-plugin插件,首先要在webpack.prod.conf.js中引入该插件,如下
const PrerenderSPAPlugin = require('prerender-spa-plugin')
在plugins中添加以下插件配置:
plugins.push(new PrerenderSPAPlugin({
staticDir: path.join(config.build.assetsRoot),
routes: ['/index.html'],
renderer: new Renderer({
headless: false,
renderAfterDocumentEvent: 'render-event'
})
4、组件按需引入:如使用vant-ui组件库,可使用babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
npm i babel-plugin-import -D
// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
使用:
import { Button } from 'vant';
Vue.use(Button)
5、过滤掉注释,console.log等,vue.confi.js中配置
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 去掉注释
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false, // 去掉注释
},
warnings: false,
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ["console.log"], //移除console
},
},
})
);
注:预渲染在实际开发中未得到验证。
3、代码方面的优化
1、组件按需引入,如使用vant-ui组件库,在不使用插件的情况下,可以手动引入需要的组件。
import Button from 'vant/lib/button';
import 'vant/lib/button/style';
2、路由懒加载
production
export default file => () => {
return import(/* webpackChunkName: "[request]" */ "@/views/" + file)
.then(module => {
return module.default;
})
.catch(e => {
console.log("加载模块出错:", e);
});
};
注意:/* webpackChunkName: “[request]” */的作用是
webpackChunkName 是为预加载的文件取别名,作用就是webpack在打包的时候,对异步引入的库代码(lodash)进行代码分割时(需要配置webpack的SplitChunkPlugin插件),为分割后的代码块取得名字
import异步加载的写法实现页面模块lazy loading懒加载(Vue中的路由异步加载):
Vue中运用import的懒加载语句以及webpack的魔法注释,在项目进行webpack打包的时候,对不同模块进行代码分割,在首屏加载时,用到哪个模块再加载哪个模块,实现懒加载进行页面的优化
config.optimization = {
splitChunks: {
chunks: "all",
maxAsyncRequests: 30, //所有异步请求不得超过30个
maxInitialRequests: 10, //初始话并行请求不得超过10个
name: false, //打包后的名称
cacheGroups: {
// 开启分离js
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// 排除node_modules 然后吧 @ 替换为空 ,考虑到服务器的兼容
const packageName = module.context.match(
/[\\/]node_modules[\\/](.*?)([\\/]|$)/
)[1];
return `cnpm.${packageName.replace("@", "")}`;
},
},
},
},
};
3、组件懒加载
const One = ()=>import("./one");
export default {
components:{
"One-com":One
},
4、预渲染
通webpack预渲染
5、服务端渲染
SSR