Question

我目前正在使用rollup.js超越简单的“helloworld”案例。我创建了一个汇总项目，我正在使用babel，eslint和leaflet的组合。我的rollup.config.js如下：

// plugins
import babel from 'rollup-plugin-babel';
import eslint from 'rollup-plugin-eslint';

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';



    export default{
        entry: 'src/scripts/main.js',
        dest: 'build/js/main.min.js',
        format: 'iife',
        sourcemap: 'inline',
        plugins: [
            resolve({
                jsnext: true,
                main: true,
                browser: true,
            }),
            commonjs(),
            eslint({
                exclude: [
                  'src/styles/**',
                ]
              }),
            babel({exclude:'node_modules/**', })
        ]
    };

接下来我的main.js由：

给出

import L from 'leaflet';


var map = L.map('map').setView([54.217, -4.5373], 8);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);

我的index.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width,minimum-scale=1,initial-scale=1">
        <style>
            #map {
              width:600px;
              height:400px;
            }
          </style>
          <link href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" rel="stylesheet" type="text/css" />
  <title>Learning Rollup</title>
</head>
<body>
  <div id="map">
  </div>

  <!-- This is the bundle generated by rollup.js -->
  <script src="js/main.min.js"></script>

</body>
</html>

当我执行rollup -c时，我最终得到一个巨大的1.4MB + main.js.min文件...如果我从sourcemap: 'inline'删除了rollup.config.js，那么该文件的大小降至390 kb。出于什么原因，源图爆炸了生成文件的大小？是不是treehacking应该进一步减少生成的文件？

Answer 1

源映射几乎总是比它映射的代码大。出于这个原因，sourcemap: 'inline' 不推荐 - 改为sourcemap: true，它将写入相邻的.map文件，只有在有人下载时才会下载他们的devtools打开并启用了源映射。

这与树木无关。

使用Leaflet with Rollup会生成一个巨大的源图

1 个答案: