하나. 프로젝트 최적화

최적화 1, 로딩 진행률 표시줄 표시

실행 중인 종속성 nprogress 설치

그런 다음 패키지를 가져오고 개체 표시 및 숨기기를 호출합니다.

메인에서

인터셉터 기반으로 진행률 표시줄 표시 및 진행률 표시줄 숨기기 효과 구현

요청 인터셉터가 트리거되면 요청이 시작되고 진행률 표시줄이 표시될 것으로 예상되며, 응답 인터셉터가 트리거되면 진행률 표시줄을 숨기고 싶은 것이 증명됩니다.

// 导入进度条报对应的js和css
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

최적화 2. 모든 콘솔 작업 제거

콘솔 문은 컴파일 시 경고가 되므로 이 문을 모두 제거하려면 플러그인을 설치해야 합니다.

babel-plugin-transfrom-remove-console

모든 콘솔 코드 제거

이번에는 개발 종속성이 설치됩니다.

이 플러그인을 사용하세요. //위 플러그인에 오류가 있으면 다음 플러그인을 s로 설치해서 실행하고,

babel.config,js 파일에서

 plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
    ,
    'transfrom-remove-console'
  ]

하지만 주의가 필요합니다

프로젝트 출시 단계에서 이 문구를 사용하면 문제가 없으나 프로젝트 개발 또는 테스트 단계에서 문제가 발생할 경우

릴리스 단계에서만 사용하려면 다음이 필요합니다.

// 这是项目发布阶段需要用到的babel插件
const prodPlugins = []
if(process.env.NODE_ENV === 'production'){
  prodPlugins.push('transform-remove-consoles')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
    ,
    //发布产品时用到的插件数组
    ...prodPlugins
  ]
}

둘째, 패키징 보고서 생성

프로젝트에 존재하는 문제를 보다 직관적으로 찾을 수 있으며,

최적화 3, vue.config.js를 통해 webpack의 기본 구성 수정

지금 프로젝트에서 웹페이지를 찾을 수 없습니다.

프로젝트 루트 디렉터리에 vue.config.js 구성 파일을 생성하여 프로젝트의 패키징 및 게시 프로세스를 사용자 지정할 수 있습니다.

최적화 4, 다른 패키징 항목 지정

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config =>{
      config.entry('app').clear().add('./src/main-prod.js')
    })
    config.when(process.env.NODE_ENV === 'development', config =>{
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
})

기본 사본 두 개를 만들고 이름을 바꿉니다.

최적화 5, 첫 번째 파일 리소스의 크기 줄이기

6. 외부를 통해 외부 CDN 리소스 로드

기본적으로 가져오기 구문을 통해 가져온 타사 종속 패키지는 결국 패키징되고 동일한 파일로 병합되므로 패키지가 성공한 후 단일 파일의 크기가 너무 커지는 문제가 발생합니다.

위와 같은 문제를 해결하기 위해 webpack의 externals 노드를 통해 외부 CDN 리소스를 구성하고 로드할 수 있습니다. externals에 선언된 모든 타사 종속 패키지는 패키지되지 않습니다.

vue.config.js에서

具体配置代码如下：
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})

同时，需要在 public/index.html 文件的头部，添加如下的 CDN 资源引用：
<!-- nprogress 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- 富文本编辑器 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />

同时，需要在 public/index.html 文件的头部，添加如下的 CDN 资源引用：
<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- 富文本编辑器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-quill-editor.js"></script>

그러나 element-ui가 여전히 매우 크다는 것을 알 수 있습니다.

이 볼륨을 줄이기 위해

7. CDN을 통한 ElementUI 패키징 최적화

虽然在开发阶段，我们启用了 element-ui 组件的按需加载，尽可能的减少了打包的体积，但是那些被按需加载的组件，还是占用了较大的文件体积。此时，我们可以将 element-ui 中的组件，也通过 CDN 的形式来加载，这样能够进一步减小打包后的文件体积。

具体操作流程如下：

① 在 main-prod.js 中，注释掉 element-ui 按需加载的代码

② 在 index.html 的头部区域中，通过 CDN 加载 element-ui 的 js 和 css 样式

现在占用的更小的

但是打开项目空白，搜了之后发现

P202，解决项目运行后一片空白的问题。

原因：老师的 cdn 文件过时了

解决方法：将老师的 vue-router.min.js 后缀的文件替换成最新的

src="" target="_blank">https://cdn.staticfile.org/vue-router/0.4.0/vue-router.min.js">

如果大家有兴趣的可以去浏览一下网址：

https://staticfile.org/

成功解决

优化6，自定义首页标题

当处于开发模式的时候，标题为dev-加标题名称的格式

当处于发布模式的时候，标题前面的dev会去掉

vue.config.js中的代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,

  chainWebpack: config => {
    //发布模式

    config.when(process.env.NODE_ENV === 'production', config =>{
      config.entry('app').clear().add('./src/main-prod.js')
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
        })
        config.plugin('html').tap(args => {
          args[0].isProd = true
          return args
          })
    })
    //开发模式
    config.when(process.env.NODE_ENV === 'development', config =>{
      config.entry('app').clear().add('./src/main-dev.js')
    })
    config.plugin('html').tap(args => {
      args[0].isProd = false
      return args
      })
  }
})

另外在 public/index.html 首页中，可以根据 isProd 的值，来决定如何渲染页面结构：

<!– 按需渲染页面的标题 -->

<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>

<!– 按需加载外部的 CDN 资源 -->

<% if(htmlWebpackPlugin.options.isProd) { %>

<!—通过 externals 加载的外部 CDN 资源-->包裹住所有的cdn资源

<% } %>

优化7，路由懒加载

当打包构建项目时， JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

具体需要 3 步：

① 安装 @babel/plugin-syntax-dynamic-import 包。

② 在 babel.config.js 配置文件中声明该插件。

③ 将路由改为按需加载的形式，示例代码如下：

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue')

Dark Horse] 백그라운드 관리 - 프로젝트 최적화 및 실행