vue项目总结（一）

2024年2月22日 223次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞