vue-cli打包如何优化

要优化Vue CLI打包，主要可以从以下几个方面入手：1、代码拆分；2、懒加载；3、使用CDN；4、优化图片和资源；5、减少依赖包的体积；6、使用现代模式。这些方法可以显著提高项目的加载速度和性能。下面，我们将详细探讨每一个优化方法。

一、代码拆分

代码拆分（Code Splitting）是通过将代码分成多个小的bundle，从而在需要的时候按需加载。这不仅能够减少初始加载时间，还能提高应用的响应速度。

动态导入：使用Webpack的动态导入（Dynamic Import）功能，可以按需加载模块。

// 普通的导入方式
import MyComponent from './components/MyComponent.vue';
// 动态导入方式
const MyComponent = () => import('./components/MyComponent.vue');

路由懒加载：在Vue Router中，使用动态导入可以实现路由组件的懒加载。

const routes = [
    {
        path: '/home',
        component: () => import('./views/Home.vue')
    },
    {
        path: '/about',
        component: () => import('./views/About.vue')
    }
];

Webpack SplitChunks：配置Webpack的SplitChunks插件，可以将公共代码抽取成单独的文件。

module.exports = {
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
    },
};

二、懒加载

懒加载（Lazy Loading）是一种优化策略，它允许在需要的时候才加载资源，避免了不必要的资源加载，从而提高性能。

组件懒加载：通过Vue的异步组件实现懒加载。

Vue.component('async-component', (resolve) => {
    require(['./components/AsyncComponent.vue'], resolve);
});

图片懒加载：使用如vue-lazyload这样的插件，可以实现图片的懒加载。

import Vue from 'vue';
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
    preLoad: 1.3,
    error: 'dist/error.png',
    loading: 'dist/loading.gif',
    attempt: 1
});

三、使用CDN

利用CDN可以大幅度提升资源的加载速度，因为CDN通常拥有更快的响应速度和更广泛的分布网络。

引入外部CDN资源：在Vue CLI的配置文件中，将常用的库如Vue、Vuex、Vue Router等通过CDN加载。

module.exports = {
    configureWebpack: {
        externals: {
            'vue': 'Vue',
            'vuex': 'Vuex',
            'vue-router': 'VueRouter'
        }
    }
};

在HTML模板中引入CDN：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3.6.0/dist/vuex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.4.9/dist/vue-router.min.js"></script>

四、优化图片和资源

图片和其他静态资源的优化也可以显著提升页面加载速度。

图片压缩：使用如image-webpack-loader等插件，对图片进行压缩。

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [
                    {
                        loader: 'image-webpack-loader',
                        options: {
                            bypassOnDebug: true,
                            disable: true,
                        },
                    },
                ],
            },
        ],
    },
};

使用合适的图片格式：WebP格式的图片通常比JPEG和PNG更小。
```
<img src="image.webp" alt="optimized image">
```

文件缓存：通过配置Webpack的output.filename和output.chunkFilename来实现文件的缓存。

module.exports = {
    output: {
        filename: '[name].[contenthash].js',
        chunkFilename: '[name].[contenthash].js'
    }
};

五、减少依赖包的体积

减少依赖包的体积可以显著减小打包后的文件大小。

移除不必要的依赖：定期检查package.json，移除不再使用的依赖。
使用轻量级的库：选择功能相近但体积更小的库。

Tree Shaking：确保在代码中只引入所需的模块，减少无用代码。

// 不推荐
import _ from 'lodash';
// 推荐
import { debounce } from 'lodash';

六、使用现代模式

现代模式（Modern Mode）通过生成现代JavaScript和传统JavaScript两个版本的包，现代浏览器加载现代包，老旧浏览器加载传统包。

启用现代模式：在Vue CLI配置文件中启用现代模式。

module.exports = {
    chainWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            config
                .output
                .filename('[name].[hash].js')
                .end();
        }
    },
    pluginOptions: {
        modern: true
    }
};

配置.browserslistrc：确保.browserslistrc文件中配置了现代浏览器和旧浏览器的目标。
```
> 1%
last 2 versions
not dead
```

总结：通过代码拆分、懒加载、使用CDN、优化图片和资源、减少依赖包的体积以及使用现代模式，可以显著提升Vue CLI项目的打包和加载性能。进一步的建议包括定期进行性能监测和优化，使用如Lighthouse等工具评估网页性能，并根据实际需求进行调整和优化。