Question

我是Vue和Grunt / Gulp / Webpack的新手。我有一个Vue应用程序可以正常工作（Grunt：browserify - ＆gt; babel - ＆gt; 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 - ＆gt; 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。

这是正常还是我做错了什么？

我的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',
      },
    ]
  }
}

Answer 1

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

但是，您可以使用DefinePlugin将NODE_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。

为什么Vue单个文件组件会编译为如此大的文件？

1 个答案: