2017-08-31 32 views
0

我目前通過使用rollup.js超越簡單的「helloworld」的情況下磨腳。我創建了一個彙總項目,其中使用了babel,eslint和傳單的組合。我rollup.config.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/[email protected]/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

// 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由下式給出,我最終得到了一個巨大的1.4MB + main.js.min文件...如果我從我的rollup.config.js中刪除sourcemap: 'inline',則文件大小將降至390 kb。源圖解析生成文件大小的原因是什麼?樹木砍伐是不是應該進一步減少生成的文件?

回答

2

源代碼將幾乎總是比它映射的代碼更大。因此,sourcemap: 'inline'不推薦 - 做sourcemap: true而不是它,它將被寫入到一個相鄰的.map文件,只有當某人的devtools打開並且啓用了源代碼映射時纔會下載該文件。

這與treehaking無關。