Почему отдельные компоненты Vue компилируются в такие большие файлы?

Question

Почему отдельные компоненты 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.

Это нормально или я сделал что-то неправильно?

Мой 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',
      },
    ]
  }
}

twharmon 07 июнь 2017, в 06:51

Источник

Теги:

javascript

vue.js

webpack

gruntjs

1 ответ

Ещё вопросы

Aperçu · Answer 1 · 2017-06-07T02-35-00.000Z

Я не вижу ничего плохого в вашем конфиге, иногда 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, чтобы он обрезал код, который никогда не используется, что может помочь в вашем случае.

Кроме того, вы должны полностью избавиться от Grunt, используя загрузчик babel и соответствующие пресеты.