vue-cli 프로젝트 최적화 방법 - 첫 화면 로딩 시간 단축

이 글은 첫 화면 로딩 시간을 단축하기 위한 vue-cli 프로젝트 최적화를 위주로 소개하고 있으니 필요한 친구들은 참고하시면 됩니다.

최근 인턴십에서 요구한 프로젝트 요구 사항이 많지 않아서 프로젝트 최적화에 대해 알아봤습니다. 가장 큰 이유는 첫 화면 로딩이 너무 느리기 때문입니다.

대용량 파일 찾기

웹팩 시각화 플러그인 Webpack Bundle Analyser를 사용하여 프로젝트 js 파일 크기를 확인한 다음 의도적으로 지나치게 큰 js 파일을 해결할 수 있습니다. Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解决过大的js文件。

安装

npm install --save-dev webpack-bundle-analyzer

在webpack中设置如下，然后npm run dev

Installation

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
 plugins: [
  new BundleAnalyzerPlugin()
 ]
}

은 webpack에서 다음과 같이 설정되어 있으며, 기본적으로 npm run dev 가 포트 8888에 표시됩니다.

import index from '@/components/index'
const index = r => require.ensure( [], () => r (require('@/components/index'),'index'))
//如果写了第二个参数，就打包到该`/JS/index` 的文件中。
//不写第二个参数，就直接打包在`/JS` 目录下。
const index = r => require.ensure( [], () => r (require('@/components/index')))

JS 파일은 요청 시 로드됩니다

이 설정을 사용하지 않으면 프로젝트 첫 화면 로딩 시 전체 웹사이트의 모든 JS 파일이 로드되므로 JS 파일과 JS 파일을 분리하세요. 특정 페이지를 클릭하면 이 페이지에 JS를 로드하는 것이 좋은 최적화 방법입니다.

여기서 사용되는 것은 Vue 구성 요소의 지연 로딩입니다. router.js에서는 구성요소를 도입하기 위해 가져오기 메소드를 사용하지 말고 require.ensure를 사용하십시오.

externals: { 
 'vue': 'Vue', 
 'vue-router': 'VueRouter', 
 'vuex': 'Vuex', 
 'axios': 'axios' 
}

패키징시 cdn

사용시 국내 bootcdn을 사용하여 루트디렉토리의 index.html에 vue, vuex, vue-router, axios 등을 직접 import 합니다.

웹팩 설정에서 외부 항목을 추가하고 패키징할 필요가 없는 라이브러리는 무시하세요.

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script> 
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script> 
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>

index.html에서 cdn을 사용하여 도입되었습니다.

var HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
   inject: 'body',
})

JS 파일을 본문 맨 마지막에 배치하세요.

기본적으로 빌드된 index.html에는 헤더에 js가 소개되어 있습니다.

html-webpack-plugin 플러그인을 사용하여 inject to body 값을 변경하세요. 본문 끝에 js 소개를 넣을 수 있습니다.

new webpack.optimize.UglifyJsPlugin({
 compress: {
  warnings: false,
  drop_console: true,
  pure_funcs: ['console.log']
 },
 sourceMap: false
})

코드 압축 및 콘솔 제거

UglifyJsPlugin 플러그인을 사용하여 코드를 압축하고 콘솔 제거.

rrreee

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

WeChat 미니 프로그램 블록 사용 튜토리얼

PHP 사후 정적 바인딩 분석 및 응용에 대한 자세한 설명

🎜🎜 wx:for 및 wx:for- 사용법에 대한 자세한 설명 위챗 미니 프로그램 속 아이템🎜 🎜🎜🎜🎜🎜🎜🎜🎜

위 내용은 vue-cli 프로젝트 최적화 방법 - 첫 화면 로딩 시간 단축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!