vue项目总结（一）

2024年4月1日 154次阅读 来源: kchris

Vue 独立构建 & 运行时构建

— KChris 2017.3.13 (=^.^=)

目的：优化项目中文件的体积。

1.config/index.js

npm install --save-dev compression-webpack-plugin
productionGzip: true

//Gzip off by default as many popular static hosts
//such as Surge or Netlify already gzip all static assets for you.

2.查看编译后各文件体积大小等信息

1）直接用 npm 命令：

npm run build --report

2）用 webpack 命令：

webpack --config build/webpack.dev.conf.js
webpack --config builg/webpack.dev.conf.js \ --profile --json => stats.json

结合：http://alexkuz.github.io/webp… 或者 http://webpack.github.io/anal… 上传 json 文件生成图表

Note: 不要小看这个步骤，这对于你优化项目文件的体积非常重要，它会引导你从哪些文件入手进行你的优化。从这里，我发现 vue.common.js 这个文件占了我很大的内存空间，于是，我才会在 Google 上搜索这个文件，然后发现 vue2.x 中，它的编译分独立构建和运行构建，再一步步地慢慢找到下面步骤的。

3.Vue 项目本身入手，改独立编译为运行时编译

1）build/webpack.base.conf.js


alis： {
    'vue$': 'vue/dist/vue.runtime.common.js'
}
// change vue.common.js to vue.runtime.common.js

2) 去掉项目中的 template 选项，改为 render 选项。

new Vue({
    render: function(h) {
        return h('App')
    }
})
// remove template options: template: '<App/>'

ok,在这里我们就将 vue 的独立构建改成运行时构建了。这时，我们再 npm run build，会发现，文件体积确实变小了很多，也没有了之前的 warning 提示。因为在我的项目里主要是 vue.common.js 这个文件占据了比较大的空间而导致终端有 warning 提示文件太大，所以，改成运行时编译对于我来说，基本上就解决问题了。

    原文作者：kchris
    原文地址: https://segmentfault.com/a/1190000008673060
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞