이번에는 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
위 내용은 Vue에서 첫 번째 화면 로딩 시간을 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!