Dynamic Import with Webpack

Question

Dynamic Import with Webpack

Navigation

#1 by (0 votes)

1

In a VueJS application with template Webpack , I need to import a series of SVG's according to a user's parameters.

SVG's are fixed files, but are loaded dynamically into the application. If I import all the files at once, the bundle gets too large (around 13mb). I also could not use dynamic import because in this case import would be an expression, something like import(x) where x is the name of the file to be imported according to user parameters.

What would be the solution to this problem? How can I perform the lazy load of an asset according to user parameters?

javascript vue.js webpack

asked by anonymous 13.10.2017 / 19:24

1 answer

Display array during debug with android NDK Return values of parameters calculated by lmfit

score 0 · Accepted Answer

It is possible to import of files inline through svg-inline-loader in Webpack . To avoid collision of imports svg in files CSS it was necessary to use the issuer setting. The webpack.base.config looks like this:

{
  test: /\.(svg)(\?.*)?$/,
  issuer: /\.css$/,
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
},
{
  test: /\.svg(\?.*)?$/,
  loader: 'svg-inline-loader',
}

For dynamic realization of import the following code snippet can be used

let fileName = 'foo.svg'

import('./svg/${fileName}.svg')
      .then(module => { ... } )