Project: vue. Config. Js

Introduce package acceleration plug-in, introduce package progress plug-in

npm install hard-source-webpack-plugin
npm install progress-bar-webpack-plugin
npm install chalk
Copy the code

Use externals to load external CDN resources

In the chainWebpack property of vue.config.js, determine the resources to be skipped during externals packaging if the packaging environment is a production environment

chainWebpack: config= > {
    if (IS_PROD) {
        config.set('externals', {
            vue: 'Vue'.'vue-router': 'VueRouter'.vuex: 'Vuex'.axios: 'axios'}}})Copy the code

Go to the public\index.html file and load the resource you just removed with a link

<script src="https://cdn.staticfile.org/axios/0.21.4/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.5.2/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.staticfile.org/vuex/3.6.2/vuex.min.js"></script>
Copy the code

Before optimization

After optimization (the larger the subsequent project is, the more third-party packages are loaded, and the more obvious the optimization is)

Use mocks only in a development environment, using the Tree Shaking attribute to slim down packaging

In the SRC \main.js project entry file, the introduction of mock data must be accompanied by contextual judgement. When the mock module vue-CLI itself is packaged in a development environment, the used code is skipped using the Tree shaking attribute of Webpack

// Only introduce mocks when developing the environment
if (process.env.NODE_ENV === "development") {
  require("./request/mock/index.js"); // A mock to simulate normal request state
}
Copy the code

Before optimization

The optimized

The entire mock module disappears without any additional action