首页 文章

为什么Vue单个文件组件编译成如此大的文件?

提问于
浏览
1

我是Vue和Grunt / Gulp / Webpack的新手 . 我有一个Vue应用程序可以正常工作(Grunt:browserify - > babel - > uglify),其设置如下:

// app.js
const LoginComponent = require('./login.js')

// login.js
const template = `<some html>`
module.exports = Vue.component('login-component', {
    template: template,
    // component stuff
})

然后,为了使我的组件更具可读性,我切换到单个文件组件(Webpack,Grunt:babel - > uglify)并将所有内容都运行如下:

// app.js
import LoginComponent from './login.js'

// login.js
<template>
    <some html>
</template>
<script>
export defalut {
    // component stuff
}
</script>

问题是,当使用webpack时,文件大小加倍 . 第一次设置产生 app.min.js 3.3kb ,第二次设置webpack是 7.0kb .

Is this normal or did I do something wrong?

我的 webpack.config.js 看起来像这样:

var path = require('path')

module.exports = {
  entry: './resources/js/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'resources/js/temp')
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
    ]
  }
}

1 回答

  • 0

    我没有看到您的配置有任何问题,有时webpack需要生成一些运行时代码,可以解释您的包大小的增加 .

    但是,您可以通过使用 DefinePluginNODE_ENV 变量设置为 production 并利用 UglifyjsWebpackPlugin 来减少它,这将导致优化的代码很可能会更小,因此类似于以下内容

    module.exports = {
      entry: './resources/js/app.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'resources/js/temp')
      },
      module: {
        loaders: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
          },
        ]
      },
      plugins: [
        new webpack.DefinePlugin({
          'process.env': { NODE_ENV: JSON.stringify('production') },
        }),
        new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false } }),
      ]
    }
    

    您还可以将选项 dead_code 指定为uglify,以便它修剪掉从未使用过的代码,这可能对您的情况有所帮助 .

    此外,你应该完全使用babel-loader和适当的预设摆脱Grunt .

相关问题