在搭建一个vue-cli项目时，如何配置能够优化加载速度

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