美文网首页vue打包优化
Vue 性能优化——缩小打包文件的体积

Vue 性能优化——缩小打包文件的体积

作者: LingSun | 来源:发表于2018-12-03 14:11 被阅读0次

方法:使用 webpack 提供的externals 节点,把包配置成外联的形式

步骤:

1、打开 build 目录下的 webpack.prod.conf.js 文件,添加如下代码:

externals: {

    // 包名: window全局对象,

    echarts: ‘echarts’,

    vue: ‘Vue’,

    ‘vue-router’: ‘VueRouter’,

    axios: ‘axios’,

    lodash: ‘_’,

    nprogress: ‘NProgress’

}

2、打开 index.html 首页,在头部header区域添加如下代码:

< script src=”https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js”>< /script>

< link rel=”stylesheet” href=”https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css”>

< script src=”https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js”>< /script>

< script src=”https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js”>< /script>

< script src=”https://cdn.bootcss.com/axios/0.18.0/axios.min.js”>

< script src=”https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js”>< /script>

相关文章

  • Vue 性能优化——缩小打包文件的体积

    方法:使用 webpack 提供的externals 节点,把包配置成外联的形式 步骤: 1、打开 build 目...

  • vue项目优化

    vue 项目优化 项目打包体积优化 通常vue项目通过webpack打包后,会出现vendor包的体积过大的情况,...

  • Vue.js 缩小打包文件体积

    1. config\index.js 中将 productionSourceMap: true 改为 produc...

  • vue 打包文件体积过大优化

    vue[打包的chunk-vendors.xxx.js文件过大导致加载过慢问题] 因app首页加载不流畅,于是去检...

  • webpack打包优化之路

    最近使用vue-cli和vux做的项目,打包后文件体积过大,300k开始进行优化。 优化1:使用CDN资源,减小服...

  • 复习3

    vue路由懒加载 1.vue路由懒加载解决的什么 问题:解决打包后文件过大的问题,从而优化页面加载,提升性能 注意...

  • VUE项目优化

    最近在优化vue项目性能问题,看到这个文章,赶紧收藏起来。 1、打包文件中的app.js文件放入cdn,加快页面首...

  • webpakc性能优化

    webpakc性能优化 开发环境性能优化1.优化打包构建速度2.优化代码调试 生产环境性能优化1.优化打包构建速度...

  • webpack实战——打包优化【下】

    前言 这是webpack打包优化【下】篇。前几篇针对性能要求高的项目从加快打包速度、减小资源体积方面入手,提出了一...

  • Vue 网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启...

网友评论

    本文标题:Vue 性能优化——缩小打包文件的体积

    本文链接:https://www.haomeiwen.com/subject/wqmccqtx.html