解决vue首屏加载慢,白屏的问题实例教学
程序员文章站
2022-08-04 13:50:03
解决vue首屏加载慢,白屏的问题
// 需要es6支持
const helloworld = () => import('@/components/helloworld.vue&...
解决vue首屏加载慢,白屏的问题
// 需要es6支持 const helloworld = () => import('@/components/helloworld.vue') export default new router({ routes: [ { path: '/', name: 'helloworld', component: helloworld }, ] })
或
const helloworld = resolve => require(['@/components/helloworld.vue'], resolve) export default new router({ routes: [ { path: '/', name: 'helloworld', component: helloworld }, ] })
2.开启gzip压缩
// 以vue-cli脚手架为例 找到config下index.js文件 build: { // template for index.html index: path.resolve(__dirname, '../dist/index.html'), // paths assetsroot: path.resolve(__dirname, '../dist'), assetssubdirectory: 'static', assetspublicpath: '/', /** * source maps */ productionsourcemap: true, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map', // gzip off by default as many popular static hosts such as // surge or netlify already gzip all static assets for you. // before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin // 设置生产环境gzip为true productiongzip: true, productiongzipextensions: ['js', 'css'], // run the build command with an extra argument to // view the bundle analyzer report after build finishes: // `npm run build --report` // set to `true` or `false` to always turn it on or off bundleanalyzerreport: process.env.npm_config_report }
3.使用webpack的externals属性把不需要打包的库文件分离出去,减少打包后文件的大小
// index.html中引入对应的文件或使用cdn <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> // 在webpack基础配置中添加以下代码 module.exports = { //... externals: { jquery: 'jquery' } };
4.使用vue的服务端渲染(ssr)
ssr优点是优化,以及加快首屏加载
关于ssr可以参考文档nuxt.js
上一篇: 汉字转拼音类(php)