집 >웹 프론트엔드 >JS 튜토리얼 >Vue에서 첫 번째 화면 로딩 시간을 최적화하는 방법

Vue에서 첫 번째 화면 로딩 시간을 최적화하는 방법

php中世界最好的语言원래의: 2018-04-08 15:48:042531검색

이번에는 vue가 첫 화면 로딩 시간을 최적화하는 방법을 보여드리겠습니다. vue가 첫 화면 로딩 시간을 최적화하기 위해 사용할 수 있는 주의 사항은 무엇입니까?

최근 인턴십의 프로젝트 요구 사항은 요구 사항이 많지 않아서 프로젝트 최적화에 대해 배웠습니다. 주된 이유는 첫 화면 로딩이 너무 느리다는 것이었습니다.

대용량 파일 찾기

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

安装

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

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

웹팩에서

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

를 다음과 같이 설정한 후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가 좋은 최적화 방법입니다.

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

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

cdn

패키징에 사용할 경우 vue, vuex, vue-router, axios 등을 국내 bootcdn으로 교체하고 루트 디렉터리의 index.html에 직접 도입하세요. 웹팩 설정에서 외부 항목을 추가하고 패키징할 필요가 없는 라이브러리는 무시하세요.

<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>

cdn을 사용하여 index.html로 가져옵니다.

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

JS 파일을 body의 끝 부분에 배치하세요

기본적으로 빌드 후 index.html에는 header에 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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!